CODEWITHSUNDEEP
flutterflutter-layoutstatusbar
genos
genos

Reputation: 31

how can I change the status bar icon color to white in flutter

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. https://i.sstatic.net/K0jif.png

First Page image here. [2: https://i.sstatic.net/sXU97.png][2]

Upvotes: 1

Views: 1907

Answers (2)

2Math0
2Math0

Reputation: 33

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)
                    ),
),

Upvotes: 2

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63559

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
      ),
    );

Upvotes: 0

Related Questions