How to theme with Hive and Riverpod | Flutter - flutter

Question

I am trying to implement my very own Theming system that for now consists of only the color palette. This palette is different based on which Theme is selected.
The logic: When the app first starts or the user did not change the AppSettings yet, the App should use the light or dark theme based on the system settings. The indicator for "use system settings" is that no value is provided for the key theme in Hive.
Whenever the user changes the settings from "use system settings" to "light", "dark" or "christmas", the value should be 1, 2 or 3 respectively. When switching back to system settings, the value gets deleted and the system theme should be get.
First I created an abstract class that defines the colors that can be used and will be implemented by the different theme classes:
abstract class CustomTheme {
Color get backgroundColor;
Color get secondaryBackgroundColor;
}
class LightTheme implements CustomTheme {
#override
Color get backgroundColor => Palette.white;
#override
Color get secondaryBackgroundColor => Palette.gray200;
}
class DarkTheme implements CustomTheme {
#override
Color get backgroundColor => Palette.gray900;
#override
Color get secondaryBackgroundColor => Palette.gray800;
}
class ChristmasTheme implements CustomTheme {
#override
Color get backgroundColor => Palette.green700;
#override
Color get secondaryBackgroundColor => Palette.green600;
}
I found out that with the help of a StatefulClass I am able to override didChangePlatformBrightness which is called whenever the system theme changes.
I tried creating a class that later on can be used to wrap around MaterialApp.
class ThemeBuilder extends StatefulWidget {
const ThemeBuilder({
super.key,
required this.child
});
final Widget child;
#override
State<ThemeBuilder> createState() => _ThemeBuilderState();
}
class _ThemeBuilderState extends State<ThemeBuilder> with WidgetsBindingObserver {
#override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this); // TODO: Needed?
// TODO: Start listening to changes from Hive.box('themeBox')
// If value changes to NULL, get system theme
// Otherwise set to theme based on value
// 1=Light, 2=Dark, 3=Christmas
}
#override
void didChangePlatformBrightness() {
super.didChangePlatformBrightness();
bool systemIsDarkMode = SchedulerBinding.instance.platformDispatcher.platformBrightness == Brightness.dark;
// TODO: If value in Hive is NULL, set the system theme mode
// Otherwise do nothing
}
#override
Widget build(BuildContext context) {
return widget.child;
}
}
This should also listen to changes, because whenever another theme is selected in Hive, the UI should change immediately.
I can not find any way to implement this behavior so that I can simply do something like CustomTheme.backgroundColor for the color parameters.
The Box will be open since the start of the app:
void main() async {
...
await Hive.openBox('themeBox');
...
}
PS: I don't want to make use of the default theme parameters inside the MaterialApp constructor.

Answer 1

You could always create a ThemeProvider class that houses all the code needed to store and save theme data via hive and then listen to the provider in your material app widget and use it as a theme.
Also I would recommend using Enums if your colors are constants
enum CustomTheme {
lightTheme(
backgroundColor: Palette.white,
secondaryBackgroundColor: Palette.gray200,
),
darkTheme(
backgroundColor: Palette.gray900,
secondaryBackgroundColor: Palette.gray800,
)
christmasTheme(
backgroundColor: Palette.green700,
secondaryBackgroundColor: Palette.green600,
);
const CustomTheme({
required this.backgroundColor,
required this.secondaryBackgroundColor,
});
final Color backgroundColor;
final Color secondaryBackgroundColor;
}
final themeProvider = ChangeNotifierProvider((_) => ThemeProvider());
/// Instance of ThemeProvider
class ThemeProvider extends ChangeNotifier {
CustomTheme _currentTheme = CustomTheme.lightTheme;
CustomTheme get currentTheme => _currentTheme;
set currentTheme(Color val) {
_currentTheme = val;
notifyListeners();
}
...
/// Use hive to save theme data as hex strings or something similar
Future<void> saveTheme(){}
/// Use hive to load saved theme data from hex or something similar
Future<void> loadTheme(){}
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return const ProviderScope(
child: ProviderScopeApp(),
);
}
}
class ProviderScopeApp extends HookConsumerWidget {
const ProviderScopeApp({super.key});
#override
Widget build(BuildContext context, ref) {
final currentTheme = ref.watch(themeVM.select(it) => it.currentTheme);
return MaterialApp(
title: 'Your app',
debugShowCheckedModeBanner: false,
theme: ThemeData(), /// override the default values here with values from `currentTheme`
...
);
}
}