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?
0 comments: