如何在颤动中将状态栏图标和文本颜色更改为黑色？

Question

I am using white background for App Bar in flutter and how can I change the status bar icon colors to black,

I am using this code to change the status bar color,

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.white,
  statusBarIconBrightness: Brightness.light,
));

Answer 1

You also need to set to brightness in AppBar if you are using one. Eg.

appBar: AppBar(
        backgroundColor: Colors.white,
        brightness: Brightness.dark,
),

You can checkout detailed answer here: How to change status bar color in Flutter?

Answer 2

Hi, in my project, I use the following (use Brightness was obsolete)

Without AppBar:

return AnnotatedRegion<SystemUiOverlayStyle>(
            //Set status bar icon color
            value: your_condition
                ? SystemUiOverlayStyle.dark.copyWith(
                    statusBarColor: your_color,
                    //statusBarIconBrightness: Brightness.light,
                  )
                : SystemUiOverlayStyle.light.copyWith(
                    statusBarColor: your_color,
                    //statusBarIconBrightness: Brightness.light,
                  ),
            child: your_widget);

With AppBar:

return AppBar(
    elevation: 0.0,
    systemOverlayStyle: your_condition ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light,
    backgroundColor: your_color,
);

• You can use a combination of the two methods above to achieve your goal

Answer 3

Flutter 2.4.0+ UPDATE

Since flutter 2.4.0 brightness: Brightness.dark is deprecated.

It has been replaced by systemOverlayStyle: SystemUiOverlayStyle.dark

How to use:

import 'package:flutter/services.dart';

appBar: AppBar(
    systemOverlayStyle: SystemUiOverlayStyle.dark,
    elevation: 0.0,
),

Set SystemUiOverlayStyle.dark if you want black icons.

Set SystemUiOverlayStyle.light if you want white icons.