Implement Dark Mode in Flutter using Provider

Whether you are a beginner or a well-experienced app developer this blog surely would be worth going through. As if you are a beginner then you can learn how to implement Dark mode in Flutter using the provider package. However, if you are an experienced developer then going through this blog will remind you of the whole process in a couple of minutes.

The demand and trend of Dark themes are not hidden. And the popularity is growing because the number of successful applications have the feature to turn into dark mode.

Ways to turn on the dark mode in any mobile application:

1: Here, we are going to add a custom option to change to the dark mode (Eg: Twitter, Medium app)

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

We already have all the options in the flutter.

If you check the MaterialApp widget you’ll see

We have the theme and darkTheme parameters in the MaterialApp widget. We can provide the dark ThemeData in darkTheme and light ThemeData in the theme if we want our mobile application to change the theme according to the system’s preferences.

And we just have to put some conditions to change it, especially if we have a custom flutter button or something to make changes in the dark theme then.

Let’s implement the dark mode to a mobile application

Implementation

Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

we are utilizing the SharedPreferences to set the value in the memory so even if we close the application and open it again, our data won’t lose.

Provider is utilized to manage the state when the dark theme is implemented on the application.

Step 2: Create a separate class for SharedPreferences

Here, we are going to create a separate class for the SharedPreferences so the code won’t mess up.

In the above coding, we have created a class DarkThemePreference where our developers are storing the bool value for the dark theme, we have 2 methods for saving and retrieving the bool value.

Step 3: Now, create a model class for the provider

Here, 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 package to the screen.

Step 4: Here, we are going to add custom theme data for dark mode

As you see we have to provide the ThemeData , so we have created a method for dark and light modes.

Step 5: Now, add the provider to Material app

When we run our application the first widget will be MyApp which will have MaterialApp.

Now in the initState of our MyApp through the Provider, we’ll check for the value that is simply stored in the SharedPreferences.

If you see the getCurrentAppTheme method, we are fetching the value from the preferences and setting the value in the provider.

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

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

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

Final Step: In the last step, turn on the dark theme

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

In the above coding, we can see if we find the value is “true” then the provider will set the theme to dark and turn into a light mode. All this will happen when the value is true.

and all done. 💥

In this blog, we hope you have successfully learned how to add a dark theme to an flutter application.

We tried to cover every section to implement the Dark mode theme, and we hope you collected the details to do so in your app. Still, if you have any kind of confusion or want to hire flutter developer or if any question comes to your mind then feel free to ask us by sharing your thoughts in the comment section, and our development team will revert you as soon as possible. 

About AuthorIonicfirebase is a leading Flutter app development company from where you can hire Flutter developers to give a digital presence to your business. Though, they have developed so many successful flutter apps that are running smoothly and doing good in the app development market. In fact, they have made so many ready-made mobile apps that match the most of the industry’s needs. But they are unstoppable as they continue to learn and adapt new technologies so that they do good in their field and provide the best to their valuable clients. So, if you want a custom mobile app for your business or looking for a company that has ready-made apps so that you can launch your own app in a couple of days then connecting will be worthwhile.