Flutter

Flutter: Dynamic Dark mode with Provider and Shared Preferences

Dark mode trend in 2020 are massive, recently WhatsApp and Facebook deploying their app with dark mode. So this article I wanna try to explain how to make simple dynamic theme (light mode to dark mode) in Flutter with provider and shared preferences. Make dark mode in flutter is very simple with flutter provider for stage management and Share Preferences for storing user session.

Installing Provider

Provider : https://pub.dev/packages/provider
Shared Preferences : https://pub.dev/packages/shared_preferences

Firstly we need to install the library to our project. Head over to pubspec.yaml file and add both of those library bellow dependencies: Result will be something like this

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  provider: ^4.3.1
  shared_preferences: ^0.5.8

IMPORTANT..!!
Before you adding the library to you project, please make sure you are using the latest version of the package.

Theme Helper

After package installed, now we can create helper for manage theme preferences called theme.dart under lib/helper folder

./lib/helper/theme.dart

The idea we will make is when the widget are loaded then check to shared preferences. if the value are exist, we can set theme from that value but if not get from the default one. And if user request to change the Theme, then set the user prefs and change the theme..

So for that we need at least 3 functions:

  1. load from preferences ( if not exist then get the default value )
  2. save user prefs
  3. toggle function for change the theme.

The helper code will be like this

After we create the helper, now we can go to main.dart and set the Notifier to main widget. But before that do not forget to import the provider library and the helper also.

import 'package:provider/provider.dart';
import 'package:example_flutter_darkmode_provider/helper/theme.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ThemeNotifier(),
          child: Consumer<ThemeNotifier>(
            builder: (context, ThemeNotifier notifier, child) {
              return MaterialApp(
                title: 'Flutter Demo',
                theme: notifier.darkMode ? dark_mode : light_mode,
                home: MyHomePage(title: 'Flutter Demo Home Page'),
              );
            }
          ),
    );
  }
}

Create toggle button for switch the theme like this and finish..

Container (
              padding: EdgeInsets.only(left:15, right: 15, bottom: 30),
              child: Consumer<ThemeNotifier>(
                  builder: (context,notifier,child) => SwitchListTile(
                  title: Text("Dark Mode"),
                  onChanged: (val){
                    notifier.toggleChangeTheme();
                  },
                  value: notifier.darkMode ,
                ),
              ),
            ),

If you need check current theme you are using. you can check on your widget with context like this :

var brightness = Theme.of(context).brightness;
if (brightness == Brightness.dark) {
   print('dark mode');
} else {
   print('light mode');
}

Conclusion

You can also make you custom theme as you need with similar concept.

Download full source code here : https://github.com/omadijaya/example_flutter_darkmode_provider

Good luck.!!

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *