Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davigmacode/flutter_theme_patrol
Keep an eyes on your app theme changes.
https://github.com/davigmacode/flutter_theme_patrol
Last synced: about 2 months ago
JSON representation
Keep an eyes on your app theme changes.
- Host: GitHub
- URL: https://github.com/davigmacode/flutter_theme_patrol
- Owner: davigmacode
- License: bsd-3-clause
- Created: 2020-11-03T04:08:44.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-27T04:17:17.000Z (7 months ago)
- Last Synced: 2024-06-27T05:54:12.284Z (7 months ago)
- Language: Dart
- Homepage: https://pub.dev/packages/theme_patrol
- Size: 8.42 MB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/theme_patrol)  [](https://www.buymeacoffee.com/davigmacode) [](https://ko-fi.com/davigmacode)
Keep an eyes on your app theme changes, comes with a powerful set of tools to manage multiple themes with or without theme mode.
[](https://davigmacode.github.io/flutter_theme_patrol)
[Demo](https://davigmacode.github.io/flutter_theme_patrol)
## Features
* Switch between light/dark mode
* Switch between multiple themes
* Override current theme color
## Usage
To read more about classes and other references used by `theme_patrol`, see the [API Reference](https://pub.dev/documentation/theme_patrol/latest/).
### Basic usage
```dart
// configuring
ThemePatrol(
initialMode: ThemeMode.system,
light: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.purple,
),
dark: ThemeData(
brightness: Brightness.dark,
colorSchemeSeed: Colors.purple,
toggleableActiveColor: Colors.purple,
),
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: HomePage(),
);
},
);
// consuming
ThemeController theme = ThemePatrol.of(context);
ThemeController theme = ThemeProvider.of(context);
ThemeConsumer(
builder: (context, theme, child) {
return Container();
},
);
```
### Verbose usage
```dart
// configuring
ThemeProvider(
controller: ThemeController(
initialMode: ThemeMode.system,
light: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.purple,
),
...
),
child: ThemeConsumer(
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: HomePage(),
);
},
),
);
// consuming
ThemeController theme = ThemeProvider.of(context);
ThemeConsumer(
builder: (context, theme, child) {
return child;
},
child: Container(),
);
```
### [Provider](https://pub.dev/packages/provider) usage
To read more about classes and other references used by `provider`, see their [API Reference](https://pub.dev/documentation/provider/latest/).
```dart
// configuring
ChangeNotifierProvider(
create: (_) => ThemeController(
initialMode: ThemeMode.system,
...
),
child: ...
);
// consuming
ThemeController theme = Provider.of(context, listen: true|false);
ThemeController theme = context.watch();
ThemeController theme = context.read();
ThemeMode mode = context.select((ThemeController theme) => theme.mode);
Consumer(
builder: (_, theme, child) {
return Foo();
},
child: Baz(),
);
```
## Use Case
### Only switch between light/dark mode
```dart
ThemePatrol(
initialMode: ThemeMode.system,
light: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.purple,
),
dark: ThemeData(
brightness: Brightness.dark,
colorSchemeSeed: Colors.purple,
toggleableActiveColor: Colors.purple,
),
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: Scaffold(
appBar: AppBar(
title: Text(ThemePatrol.of(context).mode.toString()),
actions: [
ThemeConsumer(
builder: (context, theme, child) {
return Switch(
value: theme.isDarkMode,
onChanged: (selected) {
if (selected) {
theme.toDarkMode();
} else {
theme.toLightMode();
}
},
);
},
),
],
),
),
);
},
);
```
### Multiple theme without dark mode
```dart
ThemePatrol(
initialTheme: 'amber',
themes: {
'purple': ThemeConfig.fromColor(Colors.purple),
'pink': ThemeConfig.fromColor(Colors.pink),
'amber': ThemeConfig.fromColor(Colors.amber),
'elegant': ThemeConfig(data: ThemeData()),
},
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
home: Scaffold(
appBar: AppBar(
title: Text(ThemePatrol.of(context).selected),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ThemeConsumer(
builder: (context, theme, _) {
return Wrap(
spacing: 5,
children: theme.availableEntries
.map((e) => ActionChip(
label: Text(e.key),
onPressed: () => theme.select(e.key),
avatar: CircleAvatar(
backgroundColor:
e.value.colorSchemeOf(context).primary,
),
))
.toList(),
);
},
),
],
),
),
),
);
},
);
```
### Multiple theme with dark mode
```dart
ThemePatrol(
initialTheme: 'amber',
initialMode: ThemeMode.system,
themes: {
'purple': ThemeConfig.fromColor(Colors.purple),
'pink': ThemeConfig.fromColor(Colors.pink),
'amber': ThemeConfig.fromColor(Colors.amber),
'basic': ThemeConfig(data: ThemeData()),
'pro': ThemeConfig(data: ThemeData(), dark: ThemeData()),
'premium': ThemeConfig(light: ThemeData(), dark: ThemeData()),
},
builder: (context, theme, _) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: Scaffold(
appBar: AppBar(
title: Text(ThemePatrol.of(context).selected),
actions: [
ThemeConsumer(
builder: (context, theme, _) {
return Switch(
value: theme.isDarkMode,
onChanged: (selected) {
if (selected) {
theme.toDarkMode();
} else {
theme.toLightMode();
}
},
);
},
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ThemeConsumer(
builder: (context, theme, _) {
return Wrap(
spacing: 5,
children: theme.available.entries
.map((e) => ActionChip(
label: Text(e.key),
onPressed: () => theme.select(e.key),
avatar: CircleAvatar(
backgroundColor:
e.value.colorSchemeOf(context).primary,
),
))
.toList(),
);
},
),
],
),
),
),
);
},
);
```
## Sponsoring
If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.