如何改变状态栏图标和文本颜色在颤振基于主题已设置？

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

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

状态栏中图标的颜色（颤动）

目前我在白/光主题中有黑色图标，在黑/黑主题中也有黑色图标（应该是白色图标）。Rest很好。

Answer 1

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

添加这个系统Chrome。。。到你的主虚空（）。在此之前，别忘了导入软件包：flatter/services。飞镖 。

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

之后，如果您使用Scaffold（）作为屏幕/页面，那么在AppBar（）中，添加这行亮度：Brightness.dark，像这样，

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

然后完成。

Answer 2

匿名用户

注意：
如果集合SystemUiOverlayStyle不被其他小部件（如AppBar）覆盖，则可接受的答案有效。

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

对于所有情况，请根据需要使用systemoverlystyle。

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个用于状态栏。

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

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

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

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

AppBar中不推荐使用brightness属性。

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

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

使用亮度。灯光或亮度。黑暗（根据需要）。

Answer 3

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

或

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

更新：

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

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

在这里查看可用的属性。

注意：对于应用程序的light主题，请使用darkoverlay，反之亦然。还要确保你import'包：flatter/services。飞镖

希望这有帮助！