正文 

当前位置： 首页 > 问答 >

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

     2023-02-23     255

关键词：

【中文标题】如何根据设置的主题更改颤动中的状态栏图标和文本颜色？【英文标题】：How to change status bar icon and text color in flutter based on theme been set? 【发布时间】：2020-01-19 14:05:23 【问题描述】：

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

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

目前的主题代码：


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

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

【问题讨论】：

这能回答你的问题吗？ How to change status bar color in Flutter? 【参考方案1】：

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

或

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

更新：

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

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

检查可用属性here。

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

希望有帮助！

【讨论】：

顺便说一句，如果我想修改 setSystemUIOverlayStyle 中的颜色怎么办。我上面的代码不起作用，因为你可以看到我尝试使用蓝色和红色。 所以我应该删除 const 字，只使用其余的？好吧，明天试试看是否有效? 新手，问题是在哪里写？【参考方案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 覆盖样式的小部件。

将此代码添加到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 中已弃用。

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

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

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

【讨论】：

它在颤振 v2.5 中已弃用 @SoloWolf93，更新了答案?【参考方案3】：

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

将此 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,

然后完成。

【讨论】：

【参考方案4】：

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

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

【讨论】：

【参考方案5】：

更新（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: ...,
  ),
)

【讨论】：

【参考方案6】：

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

AppBar(
    brightness: Brightness.dark
)

【讨论】：

感谢您的回答，但它看起来或多或少类似于 @Abhimanyu 的 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,
        );
      ,
      
    );

【讨论】：

如何根据主题更改状态栏/导航栏颜色/亮度？

】如何根据主题更改状态栏/导航栏颜色/亮度？【英文标题】：Howtochangestatusbar/navigationbarcolor/brightnesswithrespectivetotheme?【发布时间】：2022-01-2002:58:27【问题描述】：使用Getx进行主题化，但在根据浅色/深色主题更改状态栏图标亮... 查看详情

如何使用主题和 Theme.AppCompat.DayNight 更改操作栏中的文本颜色

】如何使用主题和Theme.AppCompat.DayNight更改操作栏中的文本颜色【英文标题】：HowtochangetextcolorinActionbarusingthemeandTheme.AppCompat.DayNight【发布时间】：2021-10-2117:21:33【问题描述】：我正在尝试使用主题更改默认操作栏中文本的文本颜... 查看详情

如何在颤动中将状态栏图标颜色更改为白色

】如何在颤动中将状态栏图标颜色更改为白色【英文标题】：howcanIchangethestatusbariconcolortowhiteinflutter【发布时间】：2021-11-2718:07:50【问题描述】：状态栏颜色应为黑色，其图标/文本颜色应为白色。但它不起作用。这是我的代码。... 查看详情

是否可以更改状态栏文本颜色？

...选项返回白色文本颜色。我想知道是否可以将状态栏文本设置为黑色或白色（在我的情况下为橙色 查看详情

如何根据android材料设计中的图像颜色更改工具栏和状态栏颜色的颜色？

】如何根据android材料设计中的图像颜色更改工具栏和状态栏颜色的颜色？【英文标题】：howtochangethecolorofthetoolbarandstatusbarcolorsaccordingtoimagecolorinandroidmaterialdesign?【发布时间】：2016-02-2505:00:54【问题描述】：我开始学习Android材料... 查看详情

如何更改 Android 中的状态栏图标颜色？

】如何更改Android中的状态栏图标颜色？【英文标题】：HowtochangestatusbariconcolorinAndroid?【发布时间】：2018-02-1806:58:54【问题描述】：我想将状态栏图标的颜色从白色更改为黑色。我尝试下面的代码，但我做不到。你能帮帮我吗？... 查看详情

3、flutter中themedata与appbar

...一下近期所学。首先，Android主题沉浸式设置，Flutter篇：根据字面意思就能看出来是对状态懒得设置，其中用到了dart:io与flutter/services.dart这两个重点Mark一下，有时间深入探究一下用法跟能力。回归正题。主题数据，其中最常用... 查看详情

如何使用主题通用更改AppBar的文本颜色，FAB的图标颜色？

】如何使用主题通用更改AppBar的文本颜色，FAB的图标颜色？【英文标题】：HowtochangetextcolorofAppBar,iconcolorofFABuniversallyusingtheme?【发布时间】：2018-11-1004:53:53【问题描述】：我可以将AppBar的背景颜色设置为Colors.amber。这会自动将文... 查看详情

如何根据代号中的不同形式更改状态栏的颜色？

】如何根据代号中的不同形式更改状态栏的颜色？【英文标题】：howcancolorofstatusbarbechangedasperdifferentformsincodenameone?【发布时间】：2018-02-1623:35:23【问题描述】：我已经通过下面的链接，它运作良好。changecolor但是有静态的状态颜... 查看详情

如何在 iOS 7 上更改状态栏背景颜色和文本颜色？

】如何在iOS7上更改状态栏背景颜色和文本颜色？【英文标题】：HowtochangethestatusbarbackgroundcolorandtextcoloroniOS7?【发布时间】：2013-10-0411:52:49【问题描述】：我当前的应用程序在iOS5和6上运行。导航栏为橙色，状态栏为黑色背景色和... 查看详情

如何更改 UIActivityViewController 中的文本颜色和图标颜色

】如何更改UIActivityViewController中的文本颜色和图标颜色【英文标题】：HowdoIchangethetextcolorandiconcolorinUIActivityViewController【发布时间】：2013-11-2121:27:31【问题描述】：所以，我已经看到了有关如何更改“取消”和导航按钮项目的答... 查看详情

如何更改 UIActivityViewController 中的文本颜色和图标颜色

】如何更改UIActivityViewController中的文本颜色和图标颜色【英文标题】：HowdoIchangethetextcolorandiconcolorinUIActivityViewController【发布时间】：2013-11-2121:27:31【问题描述】：所以，我已经看到了有关如何更改“取消”和导航按钮项目的答... 查看详情

如何快速更改标签栏未选择图标的颜色？

】如何快速更改标签栏未选择图标的颜色？【英文标题】：Howtochangecolorfortabbarnonselectediconinswift?【发布时间】：2015-07-0418:48:10【问题描述】：如何更改标签栏未选中图标和文本的颜色？我找到了这个答案(Howtochangeinactiveicon/textcolo... 查看详情

如何在颤动中为整个应用程序设置文本颜色主题

】如何在颤动中为整个应用程序设置文本颜色主题【英文标题】：Howtosettextcolorthemeforentireappinflutter【发布时间】：2020-10-0623:25:42【问题描述】：我使用ThemeData()的方式如下：import\'package:flutter/cupertino.dart\';import\'package:flutter/materia... 查看详情

android如何设置顶部状态栏颜色（主题）

参考技术A在Android中我们经常需要设置屏幕顶部状态栏的主题和应用页面保持同一风格，本文介绍几种常用的设置方案：首先给出一张图：22通过上图，我们可以通过设置不同的属性来达到控制不同位置颜色的目的，下面给出使... 查看详情

如何在 Ios 上更改状态栏文本颜色

】如何在Ios上更改状态栏文本颜色【英文标题】：HowtochangethestatusbartextcoloronIos【发布时间】：2019-01-1312:12:48【问题描述】：我对所有这些颤抖的东西都不熟悉。我到处寻找解决这个小问题的方法。有没有办法改变状态栏的颜色... 查看详情

当 primaryDark 为白色时更改状态栏文本颜色

...有找到改变状态文本颜色的方法。如果我将colorPrimaryDark设置为白色，我将看不到状态栏的图标，因为它们的颜色也是白色的。有什么办法可以改变状态栏文字颜色 查看详情

当 primaryDark 为白色时更改状态栏文本颜色

...有找到改变状态文本颜色的方法。如果我将colorPrimaryDark设置为白色，我将看不到状态栏的图标，因为它们的颜色也是白色的。有什么办法可以改变状态栏文字颜色 查看详情