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.

https://pub.dev/packages/shared_preferences

Step 2: Add the dependencies

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

Provider:

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.
    notifyListeners();
  }
}

File Name: Themes.dart

Here we are setting up the Theme data.

import 'package:flutter/material.dart';

//LightTheme
ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.white,
  textTheme: lightTextTheme,
);

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

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

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

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

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              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,
            ),
            Switch(
                value: themeProvider.getTheme == darkTheme,
                activeColor: themeProvider.getTheme == darkTheme
                    ? Colors.white
                    : Colors.black,
                onChanged: (d) {
                  themeProvider.changeTheme();
                })
          ],
        ),
      ),
    );
  }
}

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 {
  WidgetsFlutterBinding
      .ensureInitialized(); //required to use platform channels to call native code.
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool themeBool = prefs.getBool("isDark") ?? false; //null check
  runApp(
    ChangeNotifierProvider(
      create: (BuildContext context) => ThemeProvider(isDark: themeBool),
      child: MainWidget(),
    ),
  );
}

class MainWidget extends StatelessWidget {
  @override
  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,
      );
    });
  }
}

DarkMode Feature using Shared Preferences and Provider in Flutter

Dependencies that we used:

Shared Preference:

Provider:

How to install Provider?

Post a Comment