Dark Mode — Implementing in Flutter

In this short article, I will be talking about the dark mode a bit and how you can implement it in Flutter.

As usual, Flutter makes things easier. implementing the dark mode won’t take you more than a few lines of code and ta-da! your app has a nice dark mode that gives you happy users ✨

Why Do You Need the Dark Mode in Your App?

Simply, for better user experience. I won’t say it’s a “must” since it may affect the consistency across your app, but if you were ready to take the risk, go for it! especially if your app has lots of reading or messaging, most like-apps now are providing this option. So in brief, it’s an option that you should consider if you are about to design your app.

Flutter + Dark Mode

So you decided to implement the dark mode in your app using Flutter, you will be surprised how easily you can do it, and how easily you can customize and control it.

First, you will need a package called dynamic_theme. Luckily, you will find a package for almost everything you wanna do in Flutter. This package will give you the ability to not only implement dark mode but any mode you want, for example switching between primary colors in your app or fonts or even the whole theming style.

This packages manages changing your theme during runtime and persiting that theme.

Let’s start with a minimum example:

minimum example app

We have an app bar and a raised button where we will implement the dynamic changing function.

Next step is to depend on 2 packages:

dynamic_theme:
shared_preferences:

The shared_preferences package will keep track of what theme the user chose, so when the app is terminated and launched again it will check what theme the user was on last time and use it.

Let’s go to coding now, in the main function, we will add the check for the preferences, why in the main method? cause this check has to happen before the app builds itself. So the main method will look something like this:

Of course, you will have to add brightness in MyApp constructor.

final Brightness brightness;
MyApp(this.brightness);

All set, you will now use the DynamicTheme widget to set the theme of your app depending on the brightness value that you get from the main method.

Nothing happened yet, you won’t see any change. Let’s add a function that will toggle the brightness to change it between light and dark. Inside the onPressed property of the RaisedButton, we will add the following line:

changeBrightness();

Let’s now write this function.

changeBrightness() {
  DynamicTheme.of(context).setBrightness(
    Theme.of(context).brightness == Brightness.dark ? 
    Brightness.light : Brightness.dark
  );
}

We are saying that if the brightness of our app theme is light, change to dark and vice versa. Press the button now.

Easier than you thought, right? 🎉 You can find the full code here.
Reach me out on Twitter @pr_Mais, & LinkedIn.

Thank you for reading.