状态栏中图标的颜色 (Flutter)答案

【问题标题】：Icon's color in status bar (Flutter)状态栏中图标的颜色 (Flutter)
【发布时间】：2023-03-30 15:30:01
【问题描述】：

我正在使用 FLUTTER，设计指的是状态栏的黑色并且状态栏的图标颜色必须为白色那么如何改变状态栏图标的颜色呢？

【问题讨论】：

stackoverflow.com/questions/52489458/…
我需要更改状态栏图标的颜色而不是状态栏颜色
嗨，我在 Android 10 中遇到了同样的问题
stackoverflow.com/questions/59170915/…

【解决方案1】：

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

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

这将为您提供以下效果（iOS 和 Android）。玩转SystemUiOverlayStyle 中的属性以获得您想要的。

【讨论】：

【解决方案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，则将文本和图标的颜色更改为白色，否则颜色将为黑色。

【讨论】：

【解决方案3】：

在lib/main.dart文件中添加这个sn-p。

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

这个link 也会对你有所帮助。

【讨论】：

请对您的回答进行详细解释，以便下一位用户更好地理解您的回答。

【解决方案4】：

更新：

使用AppBar.systemOverlayStyle:

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

【讨论】：