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.

Discussion

1 comments