There’s been a recent craze surrounding dark-themed applications, especially on popular social media platforms like Instagram and Twitter. Are tech-consumers obsessing over yet another trend, or does it serve a functional purpose?

Here’s the scoop! Using a dark theme is more comfortable on the eyes, improving visibility for users with low vision and those who are sensitive to bright light; it also works well in dimly light environments. However, not everyone likes the “dark-side,” and any savvy developer will factor this into the equation when developing their apps.

In this article, we will implement a dark and light theme for the entire app using the provider package.

While the design is not the most aesthetical pleasing, it will illustrate this concept well.

Lets Code!

Create a new flutter project: flutter create — clear the contents of main.dart and so that it looks like below. Also, create the highlighted folders and files.

In the pubspec.yaml file add the dependency provider: ^3.1.0+1

In the theme_provider.dart file we will add:

Think of notifyListeners() as “set state” it will update the UI whenever it is called. setThemeData(bool val) is used to toggle between the light and dark theme, and getThemeData will return the current theme.

Now, we need to provide the ThemeData for both the light and dark themes.

The completed theme_provider.dart file.

For the ThemeProvider to work, we’ll need to modify the main.dart; wrap the MyApp() with ChangeNotifyProvider()

Final main.dart

theme_changer_page.dart

The switch is used to toggle the theme from light to dart; everything is maintained in the theme_provider.dart

Final UI

Conclusion

Flutter has made it very easy to implement dart and light theme in your app, and using the provider package has made it plain sailing!

Of course, the theme, in this case, is resettled whenever the app restarts. You can use hive or shared_preferences to persist the theme locally.

Source Code: GitHub Link

If this helped, please give me a clap, it keeps me motivated :)