Dark Mode and Custom System UI Overlay
Notes
Enabling Dark Mode is easy. Just do:
MaterialApp( theme: ThemeData.dark().copyWith( // here you can customize any ThemeData properties. Example: scaffoldBackgroundColor: Colors.black, ), home: MyHomePage(), )
Note that if the top area of your UI is dark, you'll want to choose a light style for the system UI Overlay. This is done by adding a parent AnnotatedRegion
to your Scaffold
:
AnnotatedRegion<SystemUiOverlayStyle>( value: SystemUiOverlayStyle.light, child: Scaffold(...) )
If needed, AnnotatedRegion
can be set on screen-by-screen basis.
3 comments