Dynamic Theme In Flutter Using Provider

In this article, you will learn how to Implement Dynamic Theme in Flutter using Provider.

Introduction

 
In this article, we are going to discuss how to implement dynamic theme in Flutter using Provider. There are many other ways to apply dynamic theme in Flutter but I have found Provider to be one of the best and most efficient ways. 

Summary of the Example

 
We will implement dynamic theme for controlling dark and light mode of the application which you have in some applications, like reading applications where light mode is for day and dark mode is for the night. You may have also noticed that Google Maps has the same feature for night and day modes which automatically go on and off according to the light.
 
Output
 
Dynamic Theme In Flutter Using Provider Dynamic Theme In Flutter Using Provider
Required Plugin: provider
 

Steps

 
Step 1
 
The first and most basic step is to create a new application in Flutter. If you are a beginner in Flutter, then you can check my blog, Create a first app in Flutter. I have created an app named “flutter_dynamic_theme”.

Step 2
 
Add the provider plugin in pubspec.yaml file.
  1. dependencies:  
  2.  Flutter:  
  3.    sdk: Flutter  
  4.  cupertino_icons: ^0.1.2  
  5.  provider: ^3.1.0  
Step 3
 
Create a new file for provider  theme implementation. I have created a file named theme_provider.dart. Following is the programming implementation.
  1. // Package for ChangeNotifier class  
  2. import 'package:Flutter/foundation.dart';  
  3.    
  4. class DynamicTheme with ChangeNotifier {  
  5.  // ChangeNotifier : will provide a notifier for any changes in the value to all it's listeners  
  6.  bool isDarkMode = false;  
  7.  getDarkMode() => this.isDarkMode;  
  8.  void changeDarkMode(isDarkMode) {  
  9.    this.isDarkMode = isDarkMode;  
  10.    notifyListeners(); // Notify all it's listeners about update. If you comment this line then you will see that new added items will not be reflected in the list.  
  11.  }  
  12. }  
Step 4
 
Now, open main.dart file and implement the change notifier for the whole app so we can change the theme from any point of the app. I have implemented a switch to toggle between the dark and light mode of the theme. Following is the programming implementation.
  1. import 'package:flutter/material.dart';  
  2. import 'package:Flutter_dynamic_theme/theme_provider.dart';  
  3. import 'package:provider/provider.dart';  
  4.    
  5. void main() => runApp(  
  6.      ChangeNotifierProvider<DynamicTheme>(  
  7.        builder: (_) => DynamicTheme(),  
  8.        child: MyHomePage(),  
  9.      ),  
  10.    );  
  11.    
  12. class MyHomePage extends StatefulWidget {  
  13.  @override  
  14.  _MyHomePageState createState() => _MyHomePageState();  
  15. }  
  16.    
  17. class _MyHomePageState extends State<MyHomePage> {  
  18.  @override  
  19.  Widget build(BuildContext context) {  
  20.    final themeProvider = Provider.of<DynamicTheme>(context);  
  21.    return MaterialApp(  
  22.      theme: themeProvider.getDarkMode() ? ThemeData.dark() : ThemeData.light(),  
  23.      home: Scaffold(  
  24.        appBar: AppBar(  
  25.          title: Text(themeProvider.getDarkMode()?'Dark Mode':'Light Mode'),  
  26.        ),  
  27.        body: Center(  
  28.          child: Column(  
  29.            mainAxisAlignment: MainAxisAlignment.center,  
  30.            children: <Widget>[  
  31.              Text('Enable Dark Mode'),  
  32.              Switch(  
  33.                value: themeProvider.getDarkMode(),  
  34.                onChanged: (value) {  
  35.                  setState(() {  
  36.                    themeProvider.changeDarkMode(value);  
  37.                  });  
  38.                },  
  39.              ),  
  40.            ],  
  41.          ),  
  42.        ),  
  43.      ),  
  44.    );  
  45.  }  
  46. }  
Step 5
 
Run the project in the device and test the app. You can customize the theme as per your requirement.
 

Conclusion

 
In this article, we have learned how to implement dynamic theme in Flutter using provider.
 
This example is basic and easy to understand and you can make it fully customized by implementing other theme properties in the provider file. You can also store the theme settings in shared preferences to keep settings active after closing and reopening the app.