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

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

Icon's color in status bar (Flutter)

目前，我在主题更改时以白色/浅色主题获得黑色图标，并且在主题中以深色/黑色主题获得黑色图标（应为白色图标）。休息都很好。

Answer 1

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

如果使用了 AppBar，请尝试使用，

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

对于默认 light 或 dark 主题。

Answer 2

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

或

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

更新：

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

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

检查可用属性here。

注意：对于应用的light主题，请使用dark重叠式广告，反之亦然。还要确保您import 'package:flutter/services.dart';

希望有帮助！

Answer 3

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

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

Answer 4

如果您使用的是 AppBar，则有 module.exports = { purge: [ './app/**/*.html.erb', './app/helpers/**/*.rb', './app/javascript/**/*.js' ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } 属性。您可以将亮度属性设置为 brightness，这样状态栏的图标就会变成白色。

dark

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

4 个答案: