DarkMode Feature using Shared Preferences and Provider in Flutter

Dark Mode is a feature that helps you quickly turn the application screen to dark at night time.  The toggle button serves as an ON|OFF switch which enables you to easily and quickly turn the extension ON / OFF.


Dependencies that we used:

Shared Preference:

SharedPreferences is used for storing data key-value pairs in Android and iOS. SharedPreferences in flutter uses NSUserDefaultson on iOS and SharedPreferences on Android, providing a persistent store for simple data.

How to install Shared Preference?

Step 1: Copy the Dependency from the portal.

Step 2: Add the dependencies

Paste the Copied dependency in pubspec.yaml file in your project.


A recommended approach by flutter, you can refer to it on their official flutter website. And also, we have posted detailed information about the Provider you can refer following page - Provider package

How to install Provider?

You can get the dependency details on the Flutter official site and also you will be navigated to the official site by clicking this link - Flutter - Provider.

Step 1: Copy the Provider version:

Step 2: Paste it to your project file pubspec.yaml:

Now we are going into the coding part

File Name: ThemeNotifier.dart

Here we are setting up the SharedPreferences using Provider Package.
import 'package:flutter/material.dart';
import '/themes/Themes.dart';
import 'package:shared_preferences/shared_preferences.dart';

class ThemeProvider extends ChangeNotifier {
  late ThemeData _selectedTheme;
  late SharedPreferences prefs;
  ThemeProvider({bool isDark: false}) {
    this._selectedTheme = isDark ? darkTheme : lightTheme;

  ThemeData get getTheme => _selectedTheme;

  Future<void> changeTheme() async {
    prefs = await SharedPreferences.getInstance();

    if (_selectedTheme == darkTheme) {
      _selectedTheme = lightTheme;
      await prefs.setBool("isDark", false);
    } else {
      _selectedTheme = darkTheme;
      await prefs.setBool("isDark", true);
//notifying all the listeners(consumers) about the change.

File Name: Themes.dart

Here we are setting up the Theme data.
import 'package:flutter/material.dart';

ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.white,
  textTheme: lightTextTheme,

TextStyle lightTextStyle = TextStyle(
  fontSize: 20,
  color: Colors.black,
TextTheme lightTextTheme = TextTheme(
  bodyText1: lightTextStyle,

ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.black,

TextStyle darkTextStyle = TextStyle(
  fontSize: 20,
  color: Colors.white,
TextTheme darkTextTheme = TextTheme(
  bodyText1: lightTextStyle,

File Name: Home.dart

Designing the screen.
import 'package:flutter/material.dart';
import 'package:light_dark_theme_flutter/models/ThemeNotifier.dart';
import 'package:light_dark_theme_flutter/themes/Themes.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  _HomeScreenState createState() => _HomeScreenState();

class _HomeScreenState extends State<HomeScreen> {
  Widget build(BuildContext context) {
    ThemeProvider themeProvider =
        Provider.of<ThemeProvider>(context, listen: false);

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
              alignment: Alignment.center,
              child: Text(
                themeProvider.getTheme == darkTheme ? 'Night Mode' : 'Day Mode',
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              width: MediaQuery.of(context).size.width * 0.8,
              height: MediaQuery.of(context).size.height * 0.2,
                value: themeProvider.getTheme == darkTheme,
                activeColor: themeProvider.getTheme == darkTheme
                    ? Colors.white
                    : Colors.black,
                onChanged: (d) {

File Name: Main.dart

Called required Functions and Widgets
import 'package:flutter/material.dart';
import 'package:light_dark_theme_flutter/models/ThemeNotifier.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'screens/Home.dart';

void main() async {
      .ensureInitialized(); //required to use platform channels to call native code.
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool themeBool = prefs.getBool("isDark") ?? false; //null check
      create: (BuildContext context) => ThemeProvider(isDark: themeBool),
      child: MainWidget(),

class MainWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    //Wrapping MaterialApp with Consumer makes the ThemeProvider available throughout the app.
    return Consumer<ThemeProvider>(builder: (context, themeProvider, child) {
      return MaterialApp(
        title: 'Flutter Theme',
        home: HomeScreen(),
        theme: themeProvider.getTheme,
        debugShowCheckedModeBanner: false,


Popular posts from this blog

Error Handling in Flutter - Gradle issue

How to Make a Dynamic and Trending ListView with Flutter Widgets?