theme_mode_handler

Flutter 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: ^3.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);

Get the current themeMode with:

ThemeModeHandler.of(context).themeMode;

Check the example folder for a complete example.

API

builder

Type: Widget Function(ThemeMode themeMode).

Function that runs when themeMode changes.

manager

Type: IThemeModeManager.

Implementation of IThemeModeManager to load and save the selected value.

defaultTheme

Type: ThemeMode.

Default value to be used when manager.loadThemeMode returns null or an invalid value.

placeholderWidget

Type: Widget?.

While the themeMode is loaded, you can choose to render a different widget. By default, it'll render an empty container.

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

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!