theme_mode_handler 2.0.0

Widget to change themeMode during runtime and persist it across restarts

theme_mode_handler

Widget to change themeMode during runtime and persist it across restarts.

Motivation

Flutter 1.9 introduced a new way to control which theme is used: MaterialApp.themeMode. If you have specified the darkTheme and theme properties, you can use themeMode to control it. The property defaults to ThemeMode.system.

This package wraps this functionality and allows you to persist and retrieve the user's preference wherever you want by implementing an interface.

Installation

Add this to your pubspec.yaml:

dependencies:
  theme_mode_handler: ^2.0.0

Usage

• Create a class that implements the IThemeModeManager interface:

class MyManager implements IThemeModeManager {
  @override
  Future<String> loadThemeMode() async {}

  @override
  Future<bool> saveThemeMode(String value) async {}
}

• Import the ThemeModeHandler widget, wrap MaterialApp with it and pass it an instance of your manager:

import 'package:theme_mode_handler/theme_mode_handler.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeModeHandler(
      manager: MyManager(),
      builder: (ThemeMode themeMode) {
        return MaterialApp(
          themeMode: themeMode,
          darkTheme: ThemeData(
            brightness: Brightness.dark,
          ),
          theme: ThemeData(
            brightness: Brightness.light,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

• Change the themeMode with:

ThemeModeHandler.of(context).saveThemeMode(value);

This updates the shared preference.

• Get the current themeMode with:

ThemeModeHandler.of(context).themeMode;

Extra

This package exports a dialog and a method to simplify its usage.

• Import the dialog with:

import 'package:theme_mode_handler/theme_picker_dialog.dart';

• Use it like this:

void _selectThemeMode(BuildContext context) async {
  final newThemeMode = await showThemePickerDialog(context: context);
  print(newThemeMode);
}

A complete example can be found on the example folder.

Inspiration

This package is inspired and based on the great package dynamic_theme.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Arthur Denner 💻 🎨 💡 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Arthur Denner