One of the trending concepts in the mobile application is the ability to have multiple themes such as light and dark themes, and you can have as many themes as possible in your application. the question right now is how to manage the theme in order to cut across all pages. thinking about managing the state of your theme in the application. one of the ways of managing the state is using stateful widget which is a terrible approach and it's inefficient and the other approach is to use statement package, there are a lot of statement management packages in flutter such as Providers, BLOC, Redux, Mobx e.t.c in this article I will be chosen provider state management package.

Provider State management package

using a state management package allows you to manage your state globally in your application, it is more like having a global store where each page, widgets can connect directly to and access and manipulate data.

Steps:

How to install Provider Package add below snippet in your pubspec.yml file under the dependencies section

provider: ^3.1.0+1

//to have the latest provider package
provider:

2. create a dart file that has all your theme definition

//theme.dart

ThemeData darkTheme = ThemeData.dark().copyWith(
    primaryColor: Color(0xff1f655d),
    accentColor: Color(0xff40bf7a),
    textTheme: TextTheme(
        title: TextStyle(color: Color(0xff40bf7a)),
        subtitle: TextStyle(color: Colors.white),
        subhead: TextStyle(color: Color(0xff40bf7a))),
    appBarTheme: AppBarTheme(color: Color(0xff1f655d)));

ThemeData lightTheme = ThemeData.light().copyWith(
    primaryColor: Color(0xfff5f5f5),
    accentColor: Color(0xff40bf7a),
    textTheme: TextTheme(
        title: TextStyle(color: Colors.black54),
        subtitle: TextStyle(color: Colors.grey),
        subhead: TextStyle(color: Colors.white)),
    appBarTheme: AppBarTheme(
        color: Color(0xff1f655d),
        actionsIconTheme: IconThemeData(color: Colors.white)));

3. Create a theme model

you need to create your theme model

import 'package:flutter/material.dart';
import 'package:whatsapp/theme.dart';

enum ThemeType { Light, Dark }

class ThemeModel extends ChangeNotifier {
  ThemeData currentTheme = darkTheme;
  ThemeType _themeType = ThemeType.Dark;

  toggleTheme() {
    if (_themeType == ThemeType.Dark) {
      currentTheme = lightTheme;
      _themeType = ThemeType.Light;
      return notifyListeners();
    }

    if (_themeType == ThemeType.Light) {
      currentTheme = darkTheme;
      _themeType = ThemeType.Dark;
      return notifyListeners();
    }
  }
}

Explanation:

we are creating an enum type for our theme, which we allow us to assign a type to each Themedata, it also helps us to check currently theme efficiently
We create a class that extends ChangeNotifier, create currentTheme as a property of ThemeData and set the default value to darkTheme and also property _themeType then assign your current themeType to it. you can set any theme of your choice, it's the theme that will be the default app theme
create a method that handles the toggling of your theme from theme 1 to theme 2. But the most important part is to call notifyListener() method, it is the method that informs your store that your state value has changed.

Wrap provider Class as a parent of your MaterialApp, which will allow all pages, widgets e.t.c have access to the provider value.

void main() => runApp(
ChangeNotifierProvider<ThemeModel>(
    builder: (BuildContext context) => ThemeModel(), child: MyApp()));

Consuming your state value anywhere in your application

Provider.of<object>(context);

it allows you to access your provider store value and access your data. by specifying the ThemeModel.

below is your output

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: Provider.of<ThemeModel>(context).currentTheme,
      home: MyHomePage(title: 'WhatsApp'),
    );
  }
}

Finally, Adding toggle widget to your app, this is the widget that will eneable you to switch from theme 1 to theme 2 and vice-versa. for the sake of simplicity of the article, I will just add a RaisedButton widget to MyHomePage Screen. snippet below

class MyHomePage extends StatelessWidget
{
final String title;

MyHomePage({this.title});

Widget build(BuildContext context){
 return Scaffold(
     appBar: AppBar(
     title: Text(widget.title)),
     body: Center(
child:RaisedButton(child: Text("Change Theme",
 onpressed:(){
Provider.of<ThemeModel>(context).toggleTheme();
}
))
);
}

}

NB: Provider.of<ThemeModel>(context).toggleTheme(); allows you to connect to your themeModel class and run toggleTheme() method.

Conclusion

The main purpose of this article is to allow you, to have an understanding of how you can create your own multi-based flutter applications using Providers State management package.

Managing multiple themes in flutter application

Comments

Flutter

How to fix Android X error with firebase plugin in your flutter application

More from this blog

Mastering the Singleton Pattern in Dart

Understanding Design Patterns: Why Dart Developers Should Care

How to run your flutter app on multiple emulator devices using vscode

Top 10 Youtube channels for Flutter developers (2020)

How to fix Android X error with firebase plugin in your flutter application

Provider State management package

Steps:

Conclusion

Command Palette

Comments

Flutter

How to fix Android X error with firebase plugin in your flutter application

More from this blog

Provider State management package

Steps:

Conclusion