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 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 2 · Answer 2 · 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 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

175,842
51
533
380

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

Icon's color in status bar (Flutter)

4 Answers4

Linked