状态栏中图标的颜色（Flutter）

Question

我正在使用 FLUTTER，设计指的是状态栏的黑色，状态栏的图标颜色必须是白色，那么如何在 flutter 中更改状态栏图标的颜色？

Answer 1

将下面的代码段添加到您的main.dart 。 setSystemUIOverlayStyle允许更改系统覆盖样式（如果有）。 这将在您的应用程序中全局完成工作。

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

这将为您提供以下效果（iOS 和 Android）。 使用SystemUiOverlayStyle的属性来获得你想要的。

Answer 2

要将icon更改为白色，请尝试在build方法中执行以下操作：

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

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

如果setStatusBarWhiteForeground方法设置为 true，则该方法setStatusBarWhiteForeground文本和图标的颜色更改为白色，否则颜色将为黑色。

更多信息： https : //github.com/mchome/flutter_statusbarcolor/blob/master/lib/flutter_statusbarcolor.dart#L29

Answer 3

将此代码段添加到lib/main.dart文件中。

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

此链接对您也有帮助。

Answer 4

更新：

使用AppBar.systemOverlayStyle ：

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

Answer 5

从Flutter 2.4开始，要直接设置style，所以：

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle.dark,
)

此代码适用于 Android 和 iOS。

Answer 6

我知道我迟到了，但对于那些面临同样问题的人

在MaterialApp()主题属性中的main.dart添加如下代码

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

注意到Brightness.dark提供深色图标，这当然适用于黑色背景情况下的白色背景Brightness.light

设置为【Brightness.light】，系统栏图标为白色。

设置为【亮度.暗】，系统栏图标为黑色。

这将在您的应用程序中全局运行

如果你想要它用于特定页面， AppBar()中有一个名为systemOverlayStyle:将上面的相同代码复制到它

AppBar(
    systemOverlayStyle: const SystemUiOverlayStyle(
                      statusBarColor: Colors.transparent,
                      statusBarBrightness: Brightness.dark, // For iOS: (dark icons)
                      statusBarIconBrightness: Brightness.dark, // For Android(M and greater): (dark icons)
                    ),
),