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