dynamik_theme 0.0.5 icon indicating copy to clipboard operation
dynamik_theme: ^0.0.5 copied to clipboard

Easy to use Dynamic Theme for Flutter with automatic persistence support.

Easy to use Dynamic Theme for Flutter with automatic persistence support.

Pub Star on Github License: MIT

Supported Themes Modes #

  • Light Theme
  • Dark Theme
  • System Mode
  • Dynamic Mode
  • Custom Color

Usage #

Setup Storage #

Implement ThemeStorage for persistence.

class HiveStorage extends ThemeStorage {
  final box = Hive.box<String>(_boxName);
  final key = 'theme';
  Future<void> delete() async {
    await box.clear();

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

  Future<void> write(ThemeState state) async {
    await box.put(key, state.toJson());

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());

Use DynamikTheme #

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  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(),

Update Theme #

Update theme with

// Set new theme with provided ThemeState.

// Change ThemeMode. ThemeMode.light or ThemeMode.dark
// or ThemeMode.system.

// Set dynamic theme mode. Automatically sets color from device.
//(not supported on iOS)

// Set custom color.

  runSpacing: 10,
  spacing: 10,
  children: SimpleThemeType.values
      .map((e) => InputChip(
            label: Text(e.name),
            selected: themeState == e.themeState,
            onPressed: () {
              // Update theme.

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 {
    themeMode: ThemeMode.system,
    colorMode: ColorMode.dynamik,
  light(ThemeState(themeMode: ThemeMode.light)),
  dark(ThemeState(themeMode: ThemeMode.dark));

  const MyThemeType(this.themeState);
  final ThemeState themeState;

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
pub points


verified publisher iconskstha.com.np

Easy to use Dynamic Theme for Flutter with automatic persistence support.

Repository (GitHub)


API reference


Icon for licenses.MIT (LICENSE)


dynamic_color, flutter


Packages that depend on dynamik_theme