如何根据已设置的主题更改 flutter 中的状态栏图标和文本颜色？

Question

如何在没有任何第三方插件的情况下更新状态栏图标的颜色？

在我的主题中 class 我有一个函数，我正在尝试下面的代码但尚未取得结果：

目前的主题代码：

// custom light theme for app
  static final customLightTheme = ThemeData.light().copyWith(
    brightness: Brightness.light,
    primaryColor: notWhite,
    accentColor: Colors.amberAccent,
    scaffoldBackgroundColor: notWhite,
    primaryTextTheme: TextTheme(
      title: TextStyle(
        color: Colors.black
      ),

    ),
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(color: Colors.black),
      elevation: 0.0,
    )
  );

  // custom dark theme for app
  static final customDarkTheme = ThemeData.dark().copyWith(
    brightness: Brightness.dark,
    primaryColor: Colors.black,
      accentColor: Colors.orange,
      scaffoldBackgroundColor: Colors.black87,
      primaryTextTheme: TextTheme(
        title: TextStyle(
            color: Colors.white
        ),

      ),
      appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(color: Colors.white),
        elevation: 0.0,
      ),

  );

---

主题转换器代码：

// set theme for the app
   setTheme(ThemeData theme) {
     _themeData = theme;

     if(_themeData == ThemeChanger.customLightTheme){
       SystemChrome.setSystemUIOverlayStyle(
         const SystemUiOverlayStyle(
           statusBarColor: Colors.white,
           systemNavigationBarColor: Colors.white,
           systemNavigationBarDividerColor: Colors.black,
           systemNavigationBarIconBrightness: Brightness.dark,
         ),
       );
     } else {
       SystemChrome.setSystemUIOverlayStyle(
         const SystemUiOverlayStyle(
           statusBarColor: Colors.blue,
           systemNavigationBarColor: Colors.blue,
           systemNavigationBarDividerColor: Colors.red,
           systemNavigationBarIconBrightness: Brightness.light,
         ),
       );
     }

     notifyListeners();
   }

这不是我想要的，因为我不想要第三方解决方案。

Icon's color in status bar (Flutter)

目前我在白色/浅色主题中得到黑色图标，在主题更改时在深色/黑色主题中也得到黑色图标（应该是白色图标）。休息一切正常。

Answer 1

您可以通过调用 setSystemUIOverlayStyle 所需的主题来设置状态栏主题。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

或

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

---

更新：

您可以指定自己的属性，例如，

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

检查可用属性 here。

---

注意：对于应用的 light 主题，使用 dark 覆盖，反之亦然。还要确保 import 'package:flutter/services.dart';

希望对您有所帮助！

Answer 2

这个改变主题的答案对我不起作用，但我使用了这个。我知道两者是相同的东西，但通过这种方式，我们也可以使用颜色和图标主题。

 SystemChrome.setSystemUIOverlayStyle(
            SystemUiOverlayStyle(
                statusBarColor: Color(0xFFdde6e8),
                statusBarIconBrightness: Brightness.dark),
          );

Answer 3

注：
如果集合 SystemUiOverlayStyle 没有被 AppBar.

等其他小部件覆盖，则接受的答案有效

更新

因为很多人有这个问题，所以添加一个我能想到的所有情况的答案。

对于所有情况，请酌情使用 systemOverlayStyle。

浅色主题

SystemUiOverlayStyle.light

深色主题

SystemUiOverlayStyle.dark

自定义

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  systemNavigationBarColor: Color(0xFF000000),
  systemNavigationBarIconBrightness: Brightness.light,
  systemNavigationBarDividerColor: null,
  statusBarColor: Color(0xFFD59898),
  statusBarIconBrightness: Brightness.light,
  statusBarBrightness: Brightness.dark,
));

仅覆盖必需的属性。前 3 个用于导航栏，其余 3 个用于状态栏。

1。默认大小写

整个应用程序的恒定系统覆盖样式，没有应用栏和其他干扰系统 UI 覆盖样式的小部件。

在 build 方法内将此代码添加到应用 的 根小部件。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

2。具有固定系统覆盖样式的应用

整个应用程序的固定主题，带有应用栏。

如果屏幕没有应用栏，请添加选项 1 中给出的代码，然后再添加此代码。

MaterialApp(
    theme: ThemeData(
        appBarTheme: const AppBarTheme(
            systemOverlayStyle: SystemUiOverlayStyle.light,
        ),
    ),
),

3。具有不同系统叠加样式的应用栏的应用

每个应用栏都有不同的系统覆盖样式。

appBar: AppBar(
    title: const Text('Title text'),
    systemOverlayStyle: SystemUiOverlayStyle.light,
)

以下版本的旧答案 2.4.0-0.0。

brightness 属性在 AppBar 中已弃用。

This feature was deprecated after v2.4.0-0.0.pre

appBar: AppBar(
    title: const Text('Title text'),
    brightness: Brightness.dark,
),

根据需要使用Brightness.light或Brightness.dark。

Answer 4

如果您使用的是 AppBar，则有 brightness 属性。您可以将亮度 属性 设置为 dark，这样状态栏的图标就会变白。

AppBar(
    brightness: Brightness.dark
)

Answer 5

更改状态栏图标颜色（白色）。

将此 SystemChrome... 添加到您的 void main()。在此之前不要忘记 import 'package:flutter/services.dart';.

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.light,
    ),
  );
  runApp(MyApp());
}

在此之后，如果您将 Scaffold() 用于 screen/page，则在 AppBar() 中添加此行 brightness: Brightness.dark,像这样，

return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,

然后完成。

Answer 6

如果您在整个应用中使用主题生成器，可以使用如下新方法将亮度（图标颜色）更改为白色或黑色

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      debugShowCheckedModeBanner: false,
      builder: (context, navigator) {
        return Theme(
          data: ThemeData(
              primaryColor: AppColors.primary,
              accentColor: AppColors.accent,
              appBarTheme: AppBarTheme(systemOverlayStyle: 
       SystemUiOverlayStyle.light) ,//this is new way to change icons color of status bar
              fontFamily: 'Poppins'
          ),
          child: navigator,
        );
      },
      
    );
  }
}

Answer 7

更新 (Flutter 2.4.0)

不要使用 AnnotatedRegion 或 AppBar.brightness，因为它们已被弃用，请改用：

• 较少自定义：

  AppBar(
    systemOverlayStyle: SystemUiOverlayStyle.dark, // Both iOS and Android (dark icons)
  )
  

• 更多定制：

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

Answer 8

我还没有找到专门设置状态栏图标颜色的方法，但对我来说它可以将 属性 systemStatusBarContrastEnforced 设置为 true。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemStatusBarContrastEnforced: true,
  ));