reactive_theme 2.1.0

A simple pkg that toggles between light , dark mode and persists it.

reactive_theme

This package allows you to change theme of the app to light and dark mode and vice versa with the help of ReactiveThemer and ReactiveThemeBtn widgets.

Supports Android, iOS, Web, Mac, Linux and Windows.

What it can do

You can easily toogle between light mode and dark mode using the ReactiveThemeBtn or ReactiveSwitch provided by this package.

You need not to worry about preserving the theme using shared_preferences as it already preserves the theme state of the app automatically using shared_preferences package.😎

Install it

You can install reactive_theme using the below command:

 $ flutter pub add reactive_theme

Import it

Now in your dart file you can use:

import 'package:reactive_theme/reactive_theme.dart';

Usage

If you want to persist the Theme , use the code snippet below.

void main() async {
  // Get the saved thememode here
  final thememode = await ReactiveMode.getSavedThemeMode();
  // then pass it to the MyApp()
  runApp(MyApp(savedThemeMode: thememode));
}

Wrap the MaterialApp widget with ReactiveThemer and nothing else.

⚠️ [Important]

ReactiveThemer must be the topmost widget in the widget tree

// Wrap with [Reactive Themer] Widget
ReactiveThemer(
  // loads the saved thememode.
  // If null then ThemeMode.system is used
  savedThemeMode: savedThemeMode,
  builder: (reactiveMode) => MaterialApp(
    debugShowCheckedModeBanner: false,
    //Pass the reactiveMode to the themeMode parameter in order to toggle theme
    themeMode: reactiveMode,
    title: 'Reactive Theme Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(
          brightness: Brightness.light, seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    darkTheme: ThemeData(
      colorScheme: ColorScheme.fromSeed(
          brightness: Brightness.dark, seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const HomePage(),
  ),
);

ReactiveMode

You can check whether your ui is in darkmode or lightmode using the isDarkMode function which returns you a bool. Simply Call

// Returns a boolean value
ReactiveMode.isDarkMode(context);

Now you change toggle between dark and light mode easily from anywhere by using ReactiveThemeBtn or ReactiveSwitch Widget.

ReactiveThemeBtn

Parameters	Description
bgColWhenLg	sets the background color of the btn when in light mode
bgColWhendk	sets the background color of the btn when in dark mode
iconColWhendk	sets the icon color of the btn when in dark mode
iconColWhenLg	sets the icon color of the btn when in light mode
transitionType	sets the transition animation for btn , rotation , scale etc

• ReactiveThemeBtn.fromScratch()

It takes widget as a parameter so you can create anything you want from this constructor

ReactiveSwitch

A simple adpative switch for toggling thememode

Parameters	Description
darkmodeIcon	sets icon for switch when in dark mode
lightModeIcon	sets icon for switch when in dark mode
activeCol	The color to use when this switch is on
inactiveIconColor	The color to use on the thumb when this switch is off