How to Create Multiple Themes in Flutter Application?

How to Create Multiple Themes in Flutter Application?

In this Flutter tutorial, you'll understand of how you can create multiple themes based flutter application using Provider State management plugin.

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.

How to install Provider Package

add below snippet in your pubspec.yml file under the dependencies section

provider: ^3.1.0+1

create a dart file that has all your theme definition

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

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: 1.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 to any theme of your choice, it’s the theme that will comes with the app at the default.

  • 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 change.

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 enable 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(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 multiple themes based flutter application using Provider State management plugin.

Flutter Dart MobileApps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

What is Flutter and why you should learn it?

Flutter is an open-source UI toolkit for mobile developers, so they can use it to build native-looking Android and iOS applications from the same code base for both platforms. Flutter is also working to make Flutter apps for Web, PWA (progressive Web-App) and Desktop platform (Windows,macOS,Linux).

Complete SQLite CRUD Operations in Flutter

Now a days almost all application have to have some kind of data storage. Application without collaboration with other users will make use of local storage db – SQLite. In this tutorial, we are going to cover all CRUD operations in Flutter with SQLite.

6 Things About HTTP Request in Dart For Beginners

Here is an http request to get a user's data using GET request, First, we have to make an async function that returns a type. If you are here and a beginner, that means you want to learn everything about making an API request using Dart in Flutter, then you are in the right place for the HTTP tutorial.

Adobe XD plugin for Flutter with CodePen Tutorial

Recently Adobe XD releases a new version of the plugin that you can use to export designs directly into flutter widgets or screens.