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

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

在我的主题类中,我有一个函数,我尝试了下面的代码,但到目前为止还没有取得结果:

当前主题的代码:


// 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)

目前我得到了白色/浅色主题的黑色图标,以及主题更改的黑色/黑色主题中的黑色图标(应该是白色图标)。REST工作正常。


解决方案

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

更新:

您可以指定自己的属性,如

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

检查可用的属性here。


注意:对于APP的light主题,请使用darkOverlay,反之亦然。还要确保import 'package:flutter/services.dart';

希望能有所帮助!

相关文章