如何在 flutter 中将状态栏图标颜色更改为白色

Question

The status bar color should be black and its icons/texts colors should be white. But it is not working. Here is my code. Dear experts, please help me to solve it. Thank you.

First Page image here. [ 2 : https://i.stack.imgur.com/sXU97.png][2]

Answer 1

We need to use systemNavigationBarIconBrightness: Brightness.dark, to get white on android and rebuild the app.

When set to [Brightness.light], the system navigation bar icons are light.
When set to [Brightness.dark], the system navigation bar icons are dark.

  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarColor: Colors.black, // status bar color
        systemNavigationBarIconBrightness: Brightness.dark, // Icon Color
      ),
    );

Answer 2

I know I am late but for those who face the same issue

Add the following code to main.dart in the MaterialApp() theme property

MaterialApp(
       theme: ThemeData(
        appBarTheme: AppBarTheme(
                systemOverlayStyle: const SystemUiOverlayStyle(
                  statusBarColor: Colors.transparent,
                  statusBarBrightness: Brightness.dark, // For iOS: (dark icons)
                  statusBarIconBrightness: Brightness.dark, // For Android(M and greater): (dark icons)
                ))),
);

Noting that Brightness.dark provide dark icons and that's suitable for white background in black background case of course Brightness.light

That will work globally in your app

If you want it for a specific page, there's a property in AppBar() called systemOverlayStyle: copy the same code above to it

AppBar(
    systemOverlayStyle: const SystemUiOverlayStyle(
                      statusBarColor: Colors.transparent,
                      statusBarBrightness: Brightness.dark, // For iOS: (dark icons)
                      statusBarIconBrightness: Brightness.dark, // For Android(M and greater): (dark icons)
                    ),
),