dynamik_theme

Description:

dynamik theme

dynamik_theme lets you easily set theme mode or custom color. It supports dynamic color on supported platforms and it also persists theme state using storage of your choice.






Light Mode - based on light color scheme
Dark Mode - based on dark color scheme
System Mode - automatic light or dark theming based on light/dark color scheme
Dynamic Color - uses dynamic_color to automatically get color from device
Custom Color - set any color you want


Usage #
Setup Storage #
Implement ThemeStorage for persistence.
class HiveStorage extends ThemeStorage {
final box = Hive.box<String>(_boxName);
final key = 'theme';
@override
Future<void> delete() async {
await box.clear();
}

@override
ThemeState? read() {
final res = box.get(key);
if (res == null) return null;
return ThemeState.fromJson(res);
}

@override
Future<void> write(ThemeState state) async {
await box.put(key, state.toJson());
}
}
copied to clipboard
You can also use SharedPreferences or any database of your choice.
void main() {
// Initialize hive.
await Hive.initFlutter();
await Hive.openBox<String>(_boxName);

// Set ThemeStorage. If not set InMemoryThemeStorage will be used.
ThemeConfig.storage = HiveStorage();

runApp(const MyApp());
}
copied to clipboard
Use DynamikTheme #
class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return DynamikTheme(
config: ThemeConfig(
useMaterial3: true,
// You can also generate color schemes from:
// https://m3.material.io/theme-builder#/custom
lightScheme: ColorScheme.fromSeed(
seedColor: Colors.red,
),
darkScheme: ColorScheme.fromSeed(
seedColor: Colors.red,
brightness: Brightness.dark,
),
defaultThemeState: SimpleThemeType.dynamik.themeState,
builder: (themeData) {
// Add more customization on ThemeData.
return themeData.copyWith(
appBarTheme: const AppBarTheme(centerTitle: true),
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
),
);
},
),
builder: (theme, darkTheme, themeMode) {
return MaterialApp(
themeMode: themeMode,
theme: theme,
darkTheme: darkTheme,
debugShowCheckedModeBanner: false,
home: const Home(),
);
},
);
}
}
copied to clipboard
Update Theme #
Update theme with
// Set new theme with provided ThemeState.
DynamikTheme.of(context).setTheme(themeState);

// Change ThemeMode. ThemeMode.light or ThemeMode.dark
// or ThemeMode.system.
DynamikTheme.of(context).setThemeMode(e);

// Set dynamic theme mode. Automatically sets color from device.
//(not supported on iOS)
DynamikTheme.of(context).setDynamikColorMode();

// Set custom color.
DynamikTheme.of(context).setCustomColorMode(e);

copied to clipboard
Wrap(
runSpacing: 10,
spacing: 10,
children: SimpleThemeType.values
.map((e) => InputChip(
label: Text(e.name),
selected: themeState == e.themeState,
onPressed: () {
// Update theme.
DynamikTheme.of(context).setTheme(e.themeState);
},
))
.toList(),
),
copied to clipboard
See example for more.
Set predefined list of ThemeState #
You can also use SimpleThemeType which is predefined list of ThemeState. Or create you own list.
enum MyThemeType {
dynamik(ThemeState(
themeMode: ThemeMode.system,
colorMode: ColorMode.dynamik,
)),
light(ThemeState(themeMode: ThemeMode.light)),
dark(ThemeState(themeMode: ThemeMode.dark));

const MyThemeType(this.themeState);
final ThemeState themeState;
}
copied to clipboard
Contributing #
Contributions are welcomed!
Here is a curated list of how you can help:

Report bugs and scenarios that are difficult to implement
Report parts of the documentation that are unclear
Fix typos/grammar mistakes
Update the documentation / add examples
Implement new features by making a pull-request