Icon's color in status bar (Flutter)

Question

I was working with FLUTTER and the Design refers to black color for the status bar and the icon's color of the status bar must be white so how can I change statusbar icon's color in flutter?

https://stackoverflow.com/questions/52489458/how-to-change-status-bar-color-in-flutter — Amit Prajapati, Sep 17 '19 at 12:55
i need to change statusbar Icon's Color not status bar color — Mohammed Sy, Sep 17 '19 at 13:14
https://stackoverflow.com/questions/59170915/cant-change-the-status-bar-icon-brightness-in-flutter-app — AlexF1, Mar 11 '21 at 19:54

score 3 · Answer 1 · answered Sep 17 '19 at 13:24

To change the icon to white try the following inside the build method:

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

class MyApp extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
...
}

The method setStatusBarWhiteForeground will change the color of the text and icon to white if it is set to true otherwise the color will be black.

more information here: https://github.com/mchome/flutter_statusbarcolor/blob/master/lib/flutter_statusbarcolor.dart#L29

score 3 · Answer 2 · answered Apr 15 '20 at 14:43

Add the Snippet below to your main.dart. setSystemUIOverlayStyle allows one to change System overlay styles if any. This will do the job globally in your app.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark));

This will give you the effect below(iOS & Android). Play around with the properties in SystemUiOverlayStyle to get what you want.

score 1 · Answer 3 · answered Dec 17 '21 at 14:50

1

Update:

Use AppBar.systemOverlayStyle:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark, // For iOS: (light icons)
    statusBarIconBrightness: Brightness.dark, // For Android: (dark icons)
    statusBarColor: ...,
  ),
)

answered Dec 17 '21 at 14:50

CopsOnRoad

237,138
77
654
440

Thanks for pointing out that there are two options. I was trying to do that for almost half an hour with no success. It happens that I was setting iOS and testing on an android device. T_T – Caio Sant'Anna Apr 18 '22 at 00:51

Mahesh Murugan · Answer 4 · 2021-07-28T15:47:03.537

Add this snippet in lib/main.dart file.

        class App extends StatelessWidget {
          // This widget is the root of your application.
          @override
          Widget build(BuildContext context) {
        
            // This code changes background color and icon color of status bar
            SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
              // statusBarColor is used to set Status bar color in Android devices.
              statusBarColor: Colors.transparent,
        
              // To make Status bar icons color white in Android devices.
              statusBarIconBrightness: Brightness.light,
        
              // statusBarBrightness is used to set Status bar icon color in iOS.
              statusBarBrightness: Brightness.dark,
              // Here light means dark icon color for Status bar.
            ));
        
            // material app widget
            return MaterialApp(
        
              // Status bar color
              theme: ThemeData(
                appBarTheme: AppBarTheme(
                  // Brightness.dark will show white color icon
                  brightness: Brightness.dark,
                ),
              ),
        
              color: Colors.white,
        
              title: 'App',
        
              home: Scaffold(),
            );
          }
        }

This link will be helpful to you too.

Please provide a detailed explanation to your answer, in order for the next user to understand your answer better. — Elydasian, Jul 28 '21 at 12:29

score 0 · Answer 5 · answered Oct 25 '22 at 18:06

0

From Flutter 2.4 onwards, you have to set the style directly, so :

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle.dark,
)

This code works for Android and iOS.

answered Oct 25 '22 at 18:06

Hadi Beigy

101
2
8

score 0 · Answer 6 · answered Jan 14 '23 at 08: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

Set to [Brightness.light], the system bar icons are white.

Set to [Brightness.dark], the system bar icons are black.

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

Icon's color in status bar (Flutter)

6 Answers6

Linked