injected_theme_api

It is very easy to dynamically switch the theme of your app. states_rebuilder offers a very simple API to handle app theming.

Table of Contents

• InjectedTheme
  • lightThemes
  • darkThemes
  • themeMode
  • persistKey
• get the current theme
• Setting a theme
• toggle between light and dark theme
• set ThemeMode
• check the theme dark (isDarkTheme)
• get supported themes
• listen to theme change

InjectedTheme

Suppose our InjectedAuth state is named theme.

//Key is a generic type, it is the type of the 
//keys of the lightThemes and darkThemes map.
InjectedTheme<Key> theme = injectTheme<Key>({
    required Map<Key, ThemeData> lightThemes,
    Map<Key, ThemeData>? darkThemes,
    ThemeMode themeMode = ThemeMode.system,
    String? persistKey,
    //Similar to other injects
    SideEffects? sideEffects,
    SnapState<Key> Function(SnapState<Key> current, SnapState<Key> next ) stateInterceptor,
    DependsOn<Key>? dependsOn,
    int undoStackLength = 0,
    bool autoDisposeWhenNotUsed = true,
    bool isLazy = true,
    String? debugPrintWhenNotifiedPreMessage,
  })

lightThemes

This is a required parameter. It is a Map<Key, ThemeData>. It maps the light themes the app supports.

Key can be a simple string or enumeration.

The first Map Entry is taken as the default (fallback) one.

darkThemes

This is an optional parameter. Normally, there is a correspondence between the light and dark themes. Nevertheless, it is allowable to have a light theme that has no corresponded dark one.

themeMode

Used to switch between dark, light, and system theme mode. The default value will be that of the system.

persistKey

It is the key to be used to locally store the state of the theme. If defined the app will store the chosen theme and retrieve it on app start.

You have to first implement the IPersistStore.

get the current theme

theme.lightTheme; // get current light theme
theme.darkTheme:  // get current dark theme
theme.themeMode:  // get current theme mode

Setting a theme

To set the app to use a particular theme, you use:

//just mutate the state of the theme
theme.state = 'key';

toggle between light and dark theme

theme.toggle();

set ThemeMode

theme.themeMode = ThemeMode.system;

check the theme dark (isDarkTheme)

theme.isDarkTheme();

example:

Switch(
    value: theme.isDarkTheme,
    onChanged: (_) => theme.toggle(),
)

get supported themes

theme.supportedLightThemes; //get a list of light supported themes
theme.supportedDarkThemes; //get a list of dark supported themes

listen to theme change

To listen to the InjectedTheme state, we use the TopStatelessWidget that must be on top of the MaterialApp widget.

void main() {
  runApp(MyApp());
}

class MyApp extends TopStatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            theme: theme.lightTheme, //light theme
            darkTheme: theme.darkTheme, //dark theme
            themeMode: theme.themeMode, //theme mode
            home: HomePage(),
        );
  }
}