Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – ThemeMode.dark not working on Android system navigation bar

I’ve forced my app to use dark theme

      darkTheme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
        colorSchemeSeed: colorSeed,
      ),
      // Always dark mode.
      themeMode: ThemeMode.dark,

It works greatly on iOS, but on Android, the system navigation bar is still in light mode.

enter image description here

Tags:

2

Answers


  1. 0

    I believe this is the correct default behavior: the system keeps the navigation bar colors in contrast with the app content.

    However, you can control the status bar and navigation bar colors using SystemUIOverlayStyle.

    This style can be set either using SystemChrome:

    SystemChrome.setSystemUIOverlayStyle(
  // This is an example. You can create a custom style with different colors
  SystemUiOverlayStyle.dark,
);

    or by setting the systemOverlayStyle property on an AppBar:

    // In the `build` method in your page:
return Scaffold(
  appBar: AppBar(
    title: Text('title'),
    systemOverlayStyle: SystemUiOverlayStyle.dark,
  ),
  body: Center(child: Text('Page content')),
);
    Login or Signup to reply.
  2. 0

    You can change System navigation bar color with SystemChrome.setSystemUIOverlayStyle.

    Just add this code in your main function and your whole app’s navigation bar color change to black.

    void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.black,
    systemNavigationBarDividerColor: Colors.transparent,
  ));
  runApp(const MyApp());
}

    Or you can set it to dark:

    void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
  runApp(const MyApp());
}

    If you only want to change the navigation bar colors for a single screen, you can do so by setting the SystemUiOverlayStyle directly in the appBar of that screen:

    appBar: AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white,
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search