theme_config

Description:

theme config

ThemeConfig makes it easy to switch the status and navigation bars styles when the platform theme changes.






Features #

Sets system bars' light and dark styles
Updates system bars automatically when platform brightness changes
Listens to theme mode changes

Getting started #
Create a theme profile defining each style independently
final themeProfile = ThemeProfile(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
overlayStyle: SystemUiOverlayStyle.light,
darkOverlayStyle: SystemUiOverlayStyle.dark,
);
copied to clipboard
Or based on color schemes
final themeProfile = ThemeProfile.fromColorScheme(
colorScheme: ColorScheme.light(),
darkColorScheme: ColorScheme.dark(),
theme: (colorScheme) => ThemeData.from(colorScheme: colorScheme),
overlayStyle: (colorScheme) => SystemUiOverlayStyle(...),
);
copied to clipboard
ThemeConfig must be initialized so it can save and load the theme mode preferences
Future<void> main() async {
...
await ThemeConfig.init(themeProfile);
runApp(MyApp());
}
copied to clipboard
Wrap the MaterialApp with the ThemeBuilder widget so it can listen to the platform brightness and theme mode changes and change the system bars accordingly
ThemeBuilder(
builder: (theme) => MaterialApp(
...
theme: theme.light,
darkTheme: theme.dark,
themeMode: theme.mode,
),
)
copied to clipboard
Usage #
Access the app's brightness and theme mode anywhere in the project
final brightness = ThemeConfig.brightness;
final themeMode = ThemeConfig.themeMode;
copied to clipboard
Change between theme modes
ThemeConfig.setThemeMode(ThemeMode.light);
ThemeConfig.setThemeMode(ThemeMode.dark);
ThemeConfig.setThemeMode(ThemeMode.system);
copied to clipboard

Example with radio list tile:

Widget myRadioListTile(ThemeMode themeMode) {
return RadioListTile<ThemeMode>(
title: Text(themeMode.name),
value: themeMode,
groupValue: ThemeConfig.themeMode,
onChanged: (mode) => setState(() => ThemeConfig.setThemeMode(mode)),
);
}
copied to clipboard
Column(children: ThemeMode.values.map(myRadioListTile).toList())
copied to clipboard
Dynamically redefine the overlay styles
ThemeConfig.setOverlayStyle(newOverlayStyle);
ThemeConfig.setDarkOverlayStyle(newDarkOverlayStyle);
copied to clipboard
Change the current overlay style
ThemeConfig.setCustomOverlayStyle(customOverlayStyle);
copied to clipboard
Remove the current overlay style
ThemeConfig.removeCustomOverlayStyle();
copied to clipboard
Temporarily change the light and/or dark overlay styles when on a specific page
OverlayStyle(
light: newOverlayStyle,
dark: newDarkOverlayStyle,
child: ...
)
copied to clipboard
Or the custom overlay style
OverlayStyle.custom(
style: customOverlayStyle,
child: ...
)
copied to clipboard
For this widget to work you must also add our observer to the material app
MaterialApp(
...
navigatorObservers: [ThemeConfig.routeObserver],
)
copied to clipboard
Additional information #
If you notice any bugs not present in issues, please file a new issue. If you are willing to fix or enhance things yourself, you are very welcome to make a pull request.