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

Question

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

在我的主题类中，我有一个函数，在其中我正在尝试以下代码，但迄今为止还没有实现结果：

当前主题代码：

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

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

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

目前在主题更改时，我得到的是白色/浅色主题下的黑色图标，以及黑色/黑色主题下的黑色图标（应该是白色图标）。其他都正常工作。

- princeoo7

---

这个回答解决了你的问题吗？如何在Flutter中更改状态栏颜色？ - Lakshman Kambam

Answer 1

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

或者

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

---

更新：

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

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

在这里检查可用的属性。

---

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

希望这能帮助到您！

- Hemanth Raj

---

顺便问一下，如果我想修改setSystemUIOverlayStyle中的颜色怎么办？如你所见，我的上述代码没有起作用，我试图调整蓝色和红色。 - princeoo7

那我应该去掉const关键字，只使用剩下的部分吗？好的，明天试一下看是否可行。 - princeoo7

对于新手来说，问题是在哪里编写？ - Pratik Butani

所有这些答案，我仍然看不到图标，它们从未改变颜色。 - 68060

Answer 2

注意:
如果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叠加样式的小部件。

将此代码添加到应用程序的根部件(root widget)中的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的旧答案。

AppBar中的brightness属性已过时。

此功能在v2.4.0-0.0.pre版本之后被弃用

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

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

- Abhimanyu

---

在Flutter v2.5中，它已被弃用。 - SoloWolf93

@SoloWolf93，已更新答案。 - Abhimanyu

OP的问题是如何根据设置的主题更改状态栏图标，而这个答案根本没有回答这个问题。 - alfietap

Answer 3

更新（Flutter 2.4.0）

不要使用已经被弃用的AnnotatedRegion或AppBar.brightness，请改用以下方式：

• Less customizations:

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

• More customizations:

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

- CopsOnRoad

---

AnnotatedRegion 已经被弃用了吗？ - Emaborsa

Answer 4

我还没有找到一种特定设置状态栏图标颜色的方法，但对我来说，将属性systemStatusBarContrastEnforced设置为true有效。

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

- Hundenberg

Answer 5

这个关于更改主题的答案对我没用，但我使用了这个。我知道两者是相同的，但这样我们可以同时使用颜色和图标主题。

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

- Akash Bansal

Answer 6

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

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

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

在此之后，如果您正在使用 Scaffold() 来创建屏幕/页面，在 AppBar() 中添加这一行 brightness: Brightness.dark,，如下所示：

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

然后完成。

- Swayamshree Mohanty

Answer 7

如果您正在使用主题构建器来创建整个应用程序，则有一种新的方法可以将亮度（图标颜色）更改为白色或黑色，如下所示。

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

- Abdulmalek Dery

Answer 8

在AppBar中，有两件事情我们不会合并。

1. backgroundColor
2. SystemUiOverlayStyle

请查看下面的代码。使用backgroundColor或systemOverlayStyle。

appBar: AppBar(
    title: const Text('TEXT_HERE'),
    backgroundColor: Colors.white,
    systemOverlayStyle: SystemUiOverlayStyle(
      statusBarBrightness: Brightness.light,
    ),
  ),

- Prashant Gosai

Answer 9

如果您正在使用AppBar，它有一个属性。您可以将brightness属性设置为dark，这样状态栏图标就会变成白色。

AppBar(
    brightness: Brightness.dark
)

- Syed Bilal

---

谢谢您的回答，但它看起来或多或少像@Abhimanyu的答案的重复。 - shaedrich

Answer 10

我发现最好的方法是通过AppBar小部件来实现。 如果您在确切的屏幕上没有使用appbar，您可以通过实现虚拟透明的appbar来实现此目的：

Scaffold(
      // critical to imitate appbar absence
      extendBodyBehindAppBar: true,
      
      appBar: AppBar(
        // setup your style here
        systemOverlayStyle: SystemUiOverlayStyle.light,
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        toolbarHeight: 0.0,
      ),
      body: ...,
)

- igokom