Implement Dark Mode in Flutter using Provider

Hi everyone, In this article, we will be learning how to implement the dark theme in our app using the provider package

As we all now Dark theme is trending and most of the popular app has the feature to turn into the dark mode.

There are two ways to turn on the dark mode in any app:

1: Adding a custom option to change to the dark mode (Eg: Twitter, Medium app)

2: Depends on the Phone system setting (Eg: Instagram)

We already have both the options in flutter.

If you check the MaterialApp widget you will see

We have the theme and darkTheme parameter in MaterialApp widget we can provide the dark ThemeData in darkTheme and light ThemeData in theme if we want our app to change the theme according to the system preferences.

And if we have a custom button or something to change the dark theme then we just have to put some condition to change it.

Let’s implement the dark mode to an app

Implementation

Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: "<newest version>"
  provider: "<newest version>"

we are using the SharedPreferences to set the value in the memory so even if we close the app and reopens it, our data won’t lose.
Provider is used to manage the state when the dark theme is implemented on the app.

Step 2: Create a class for SharedPreferences

https://gist.github.com/ashishrawat2911/a600a32490b250014b5f9f43c2de1e50#file-dark_theme_preference-dart

We are creating a separate class for the SharedPreferences so the code won’t mess up.

We have created a class DarkThemePreference where we are storing the bool value in for the dark theme, we have two methods for saving and retrieving the bool value.

Step 3: Create a model class for provider

https://gist.github.com/ashishrawat2911/6023c8db181a3ff1935bcb60de314ead#file-dark_theme_provider-dart

We are accessing the preference value through the provider so whenever there is any change the notifyListeners() UI will be updated if we have attached the provider to the screen.

Step 4: Add custom theme data for dark mode

if you see we have to provide the ThemeData , so I have created a method for dark and light mode.

https://gist.github.com/ashishrawat2911/220778e84eb5c9d44ec0604c3a6b1d15#file-dark_theme_styles-dart

Step 5: Add the provider to Material app

void main() {
  runApp(MyApp());
}

when we run our app the first widget will be MyApp which will have MaterialApp .

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
      routes: <String, WidgetBuilder>{
        AGENDA: (BuildContext context) => AgendaScreen(),
      },
    );
  }
}

Now in the initState of our MyApp we will check for the value that is stored in the SharedPreferences through the Provider.

DarkThemeProvider themeChangeProvider = new DarkThemeProvider();

@override
void initState() {
  super.initState();
  getCurrentAppTheme();
}

void getCurrentAppTheme() async {
  themeChangeProvider.darkTheme =
      await themeChangeProvider.darkThemePreference.getTheme();
}

If you see the getCurrentAppTheme method, I am fetching the value from the preferences and set the value in the provider.

Now we will add notifier to the material app which is ChangeNotifierProvider and set a provider model to it, if any change happens in the provider it will notify its descendants.

https://gist.github.com/ashishrawat2911/8bbf5740abeb688b7864937a9db6c4cd#file-my_app_dark_theme-dart

To listen to the changes in the UI we can use Consumer will listen to the changes and update the MaterialApp .

We can also use this instead of Consumer<T> .

var darkThemeProvider = Provider.of<DarkThemeProvider>(context)

Final Step: Turn on the dark theme

For example, we have a CheckBox through which we are setting the theme.

@override
Widget build(BuildContext context) {
  final themeChange = Provider.of<DarkThemeProvider>(context);

...

Checkbox(
  value: themeChange.darkTheme, 

  onChanged: (bool value) {

  themeChange.darkTheme = value;

})

When the value is “true” the provider will set the theme to dark and turn into a light mode when the value is true.

and Kaboom 💥

We have successfully learned how to add a dark theme to your app.

We also have created a Devfest app for Google Developers Group New Delhi in which we had implemented a dark mode with some animation.

Check out the whole code here

flutter-devs/Flutter-Devfest
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Thanks for reading this article ❤

If I got something wrong 🙈, Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Connect with me on Linkedin and Github

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of  Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use  Flutter to build beautiful, interactive web experiences.

---