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 for Beginners 2020 - Build a Flutter App with Google's Flutter & Dart

Flutter for Beginners 2020 - Build a Flutter App with Google's Flutter & Dart

Flutter tutorial for Beginners 2020 - Build a Flutter App with Google's Flutter & Dart. Flutter Introduction for Beginners: Get Started with Flutter and learn how to build an iOS and Android app with Flutter! What is Flutter? How Flutter & Dart Code Gets Compiled? Why Choose Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Free Flutter Introduction for Beginners: Get Started with Flutter and learn how to build an iOS and Android app with Flutter!


Content:

  • Introduction 00:03
  • What is Flutter 01:50
  • Flutter's Architecture 07:44
  • How Flutter & Dart Code Gets Compiled
  • To Native Apps 12:31
  • Understanding Flutter Versions 15:44
  • Flutter macOS Setup 18:34
  • macOS Development Environment 37:24
  • Flutter Windows Setup 41:32
  • Windows Development Environment 01:00:48
  • Flutter & Material Design 01:04:34
  • Flutter Alternatives 01:05:49
  • Course Outline 01:11:56
  • How To Get The Most Out Of The
  • Course 01:18:36
  • Module Introduction 01:21:17
  • Creating a New Project 01:23:42
  • An Overview of the Generated Files &
  • Folders 01:35:57
  • Analyzing the Default App 01:44:18
  • Dart Basics 01:49:50
  • More Dart Basics 02:07:08
  • Building an App From Scratch 02:20:15
  • Running the App on an Emulator 02:31:18
  • Class Constructors & Named
  • Arguments 02:34:43
  • First Summary & Additional Syntax 02:43:13
  • Building a Widget Tree 02:51:24
  • Visible (Input / Output) & Invisible
  • (Layout / Control) Widgets 02:59:04
  • Adding Layout Widgets 03:02:17
  • Connecting Functions & Buttons 03:09:09
  • Anonymous Functions 03:16:40
  • Updating Widget Data (Or: Using
  • StatelessWidget Incorrectly) 03:20:01
  • Updating Correctly with Stateful
  • Widgets 03:26:38
  • A Brief Look Under The Hood 03:38:36
  • Using Private Properties 03:41:04
  • Creating a New, Custom Widget 03:46:21
  • First Styling & Layouting Steps 03:58:11
  • Enums & Multiple Constructors 04:06:12
  • Official Docs & The Widget Catalog 04:10:19
  • Passing Callback Functions Around 04:12:59
  • Introducing Maps 04:23:37
  • Mapping Lists to Widgets 04:29:30
  • final vs const 04:39:54
  • Introducing "if" Statements 04:50:45
  • [DART DEEP DIVE] More on "if"
  • Statements 04:57:36
  • [DART DEEP DIVE] The "null" Value 05:08:52
  • Outputting Widgets Conditionally 05:10:55
  • Splitting the App Into Widgets 05:13:16
  • Calculating a Total Score 05:23:13
  • Getters & "else-if" 05:30:59
  • Resetting the Quiz 05:37:34
  • Wrap Up 05:42:28

Flutter Tutorial for Beginners 2 - Learning Dart Basics | Basics of Dart

Flutter Tutorial for Beginners 2 - Learning Dart Basics | Basics of Dart

Flutter Tutorial for Beginners 2 - Learning Dart Basics | Basics of Dart programming language. We will learn the basics of Dart. Dart is Object Oriented Language Developed By Google which is Primarily used for building websites, servers, and mobile apps. Flutter is an open-source UI software development kit created by Google.Flutter is SDK that makes creating high-performing, modern and good looking apps. Flutter is easy and Works for both Android and iOS. Flutter is An open-source toolkit, developed by Google.

In this video we will learn the basics of Dart. Dart is Object Oriented Language Developed By Google which is Primarily used for building websites, servers, and mobile apps.
Welcome to this course on Flutter Tutorials for beginners. Flutter is an open-source UI software development kit created by Google.Flutter is SDK that makes creating high-performing, modern and good looking apps. Flutter is easy and Works for both Android and iOS. Flutter is An open-source toolkit, developed by Google.