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(...) )
As a result, the MyHomePage
widget will look like this:
class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @override Widget build(BuildContext context) { return const AnnotatedRegion<SystemUiOverlayStyle>( value: SystemUiOverlayStyle.light, child: Scaffold( body: Center( child: Stopwatch(), ), ), ); } }
If needed, AnnotatedRegion
can be set on screen-by-screen basis.
3 comments