Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ggalambas/theme_config
A package to help switch the status and navigation bars' styles
https://github.com/ggalambas/theme_config
dart flutter navigation-bar status-bar system-ui theme-mode
Last synced: 20 days ago
JSON representation
A package to help switch the status and navigation bars' styles
- Host: GitHub
- URL: https://github.com/ggalambas/theme_config
- Owner: ggalambas
- License: mit
- Created: 2022-04-20T14:19:15.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-06-01T17:08:00.000Z (over 2 years ago)
- Last Synced: 2024-10-22T10:59:56.278Z (2 months ago)
- Topics: dart, flutter, navigation-bar, status-bar, system-ui, theme-mode
- Language: Dart
- Homepage: https://pub.dev/packages/theme_config
- Size: 192 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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
```dart
final themeProfile = ThemeProfile(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
overlayStyle: SystemUiOverlayStyle.light,
darkOverlayStyle: SystemUiOverlayStyle.dark,
);
```
Or based on color schemes
```dart
final themeProfile = ThemeProfile.fromColorScheme(
colorScheme: ColorScheme.light(),
darkColorScheme: ColorScheme.dark(),
theme: (colorScheme) => ThemeData.from(colorScheme: colorScheme),
overlayStyle: (colorScheme) => SystemUiOverlayStyle(...),
);
```
ThemeConfig must be initialized so it can save and load the theme mode preferences
```dart
Future main() async {
...
await ThemeConfig.init(themeProfile);
runApp(MyApp());
}
```
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
```dart
ThemeBuilder(
builder: (theme) => MaterialApp(
...
theme: theme.light,
darkTheme: theme.dark,
themeMode: theme.mode,
),
)
```
## Usage
Access the app's brightness and theme mode anywhere in the project
```dart
final brightness = ThemeConfig.brightness;
final themeMode = ThemeConfig.themeMode;
```
Change between theme modes
```dart
ThemeConfig.setThemeMode(ThemeMode.light);
ThemeConfig.setThemeMode(ThemeMode.dark);
ThemeConfig.setThemeMode(ThemeMode.system);
```
* Example with radio list tile:
```dart
Widget myRadioListTile(ThemeMode themeMode) {
return RadioListTile(
title: Text(themeMode.name),
value: themeMode,
groupValue: ThemeConfig.themeMode,
onChanged: (mode) => setState(() => ThemeConfig.setThemeMode(mode)),
);
}
```
```dart
Column(children: ThemeMode.values.map(myRadioListTile).toList())
```
Dynamically redefine the overlay styles
```dart
ThemeConfig.setOverlayStyle(newOverlayStyle);
ThemeConfig.setDarkOverlayStyle(newDarkOverlayStyle);
```
Change the current overlay style
```dart
ThemeConfig.setCustomOverlayStyle(customOverlayStyle);
```
Remove the current overlay style
```dart
ThemeConfig.removeCustomOverlayStyle();
```
Temporarily change the light and/or dark overlay styles when on a specific page
```dart
OverlayStyle(
light: newOverlayStyle,
dark: newDarkOverlayStyle,
child: ...
)
```
Or the custom overlay style
```dart
OverlayStyle.custom(
style: customOverlayStyle,
child: ...
)
```
For this widget to work you must also add our observer to the material app
```dart
MaterialApp(
...
navigatorObservers: [ThemeConfig.routeObserver],
)
```
## Additional information
If you notice any bugs not present in [issues](https://github.com/ggalambas/theme_config/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.