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

Posted 2023-02-23

【中文标题】状态栏中图标的颜色 (Flutter)

【英文标题】：Icon's color in status bar (Flutter)

【发布时间】：2020-01-18 08:05:10

【问题描述】：

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

【问题讨论】：

***.com/questions/52489458/…

我需要更改状态栏图标的颜色而不是状态栏颜色

嗨，我在 android 10 中遇到了同样的问题

***.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，则将文本和图标的颜色更改为白色，否则颜色将为黑色。

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

【参考方案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: ...,
  ),
)