Dark Theme implementation - Flutter

A dark theme is a low-light UI that displays mostly dark surfaces introduced by Apple with the release of iOS 13.0 and by Google with the version of  Android 10 as an integrated part of their OS. 

In both environments, the user can switch between two modes, i.e., dark and light, using a toggle switch.

Now, its the duty of developers to design their apps according to the latest standards, and to cope up or support the dark theme configurations, developers have to develop their applications keeping the UI's of both the themes in their mind. 

The support of dark theme for all the Flutter developers has been introduced by Google since Feb 2019.

So, what's the dark theme, and what's the need for it?

A dark theme displays dark surfaces across the majority of UI. It is designed keeping in mind the factors such as improving the ergonomics by reducing the eye strain, adjusting brightness to current lightening conditions, and facilitating the use of the mobile screen in dark environments - all while conserving the battery of the device.

Above all this, I think that there was a need to bring something new in the market to supplement the default light theme.

In a dark theme, the system uses the dark colors to all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker background.

How to implement a Dark theme in Flutter?

First, I would like to show you how the app MaterialApp Widget will look before the implementation of the black theme.

And this is the MaterialApp Widget after the implementation of the dark theme.

Flutter allows us to implement a 2nd independent theme with the introduction of darkTheme argument in MaterialApp widget.

I have set the argument darkTheme as Brightness.dark i.e., it will now change the theme of the app as dark when system theme changes.

Now when you toggle the dark theme in your system, your flutter app will automatically switch from light to dark!

SampleApp

Code

Conclusion

Time to look at what we learned. In a dark theme, the system uses the dark colours to all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker background, and from Feb 2019 flutter is officially supporting the dark theme.

It was easy, No?