A quick and easy way to implement dark mode in Flutter
Currently, one cannot deny that there’s a strong push & demand for dark mode in each application regardless of the platform. Google Trends shows us that the search term has been definitely trending since 2018. The reasons are simple: it’s easier on your eyes when using the app at night, it saves some battery especially if your device uses an OLED screen, and the most important one: it looks cool.
Do clients want dark mode anyway?
Usually, the answer to the question stated in this section title is some version of the following response:
“Not now. It would be a nice-to-have feature, but… maybe later”.
It’s understandable that the clients want to minimize the production cost of their app focusing on what’s really matters in terms of their app’s functionality and stability. But.. do they really have to sacrifice something to get the dark mode? Let’s find out.
How and where to start?
Let’s make something clear. If you want to integrate dark mode into your new app without much effort, you need to do some groundwork beforehand. Adding it to an already existing Flutter app is also possible, but will require more time as well as some refactoring.
Here are the things we’ll need:
- Adaptive colors
- Adaptive text style
- A way of switching between themes
Adaptive colors
Let me start this section by saying that less is more. By that I mean: try to keep the number of colors in your app to a minimum. Trust me, you don’t need all the 50 shades of grey.
We begin by defining an abstract class for each of our theme’s colors:
(As to which colors you should use, please consider the recommended color palette as defined in Apple’s dynamic system colors or Google’s Material Design guidelines.)
We strongly encourage you to use a naming convention that is more abstract than directly using the color’s name or numbering it. Do primaryContent instead of black or text1.
Now let’s define a class that will store both color variants and switch between them based on the context’s theme.
In the next step, we will implement our proper app colors class which we will be using throughout the whole app:
We can then use this class everywhere where we have access to the current BuildContext like this:
Adaptive text styles
Now that we have our colors defined, we focus on creating different text styles. We can take inspiration on how to structure and name them according to the official Material Design type system guidelines.
Just like with the color class, we can use them anywhere where we have a BuildContext available. Here’s an example:
Here’s where the magic happens
Now that we have all the necessary building blocks, we can implement the main logic required to make Flutter automatically switch the theme based on whether the user has dark mode enabled in their Android/iOS phone settings.
Start by defining a map which will store our theme data for each of the two theme modes:
The final point is to tell our MaterialApp to switch between the given themes like this:
We can also manually specify the themeMode property in MaterialApp which will provide us with a way of giving the user full control over the displayed theme. The user will decide which theme they want to use by choosing the appropriate option in the app’s settings.
That’s all. Now go implement the dark mode!
Deviniti is your guide to the universe of digital transformation and enterprise software. Check out who we are and what we can do on our website.
If you want to learn more Flutter tips and tricks, make sure to check out other articles available on Deviniti Technology-Driven Blog:
