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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

Update:

Use AppBar.systemOverlayStyle :

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

Answer 5

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

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle.dark,
)

This code works for Android and iOS.

Answer 6

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