在flutter中进入暗模式时更改系统导航和状态栏的颜色

Posted 2023-03-06

【中文标题】在flutter中进入暗模式时更改系统导航和状态栏的颜色

【英文标题】：Change color of system navigation and status bar when entering the dark mode in flutter

【发布时间】：2021-12-04 11:13:51

【问题描述】：

我想在进入深色模式时更改系统导航和状态栏的颜色。

这是我的代码：

void main() async 
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
  statusBarBrightness: Brightness.dark,
  statusBarColor: Colors.white,
  statusBarIconBrightness: Brightness.dark,
  systemNavigationBarColor: Colors.white,
  systemNavigationBarDividerColor: Colors.white,
  systemNavigationBarIconBrightness: Brightness.dark,
),
);
...

我使用 SystemChrome，它工作正常。但我的问题是，我只能通过代码更改颜色手册，而不是切换到深色或浅色模式或使用系统设置时。

【问题讨论】：

你在哪里测试它，我的意思是设备网络？为什么不在MaterialApp 上使用themeMode？

这是一个 android 应用程序，我还在 MaterialApp 中使用了一个 themeMode 来改变黑暗和光明模式。这可行，但我不知道如何为导航和状态栏做同样的事情。

【参考方案1】：

在尝试了很多事情之后，我找到了以下解决我的问题的方法。我不知道这是否是最干净的解决方案，但它确实有效。这个解决方案对于那些不像我这样不使用 AppBar 的人来说很有趣。

诀窍如下……

@override
Widget build(BuildContext context) 
 Theme.of(context).scaffoldBackgroundColor == Colors.white
    ? _lightStatusAndNavigationBar()
    : _darkStatusAndNavigationBar();
return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
...

查询在我的类的构建中，其中我有我的应用程序的 NavigationBar。所有其他屏幕都连接在那里。

使用Theme.of(context).scaffoldBackgroundColor，请问状态栏和导航栏应该使用哪种设计。

这是不同颜色的两个函数：

void _darkStatusAndNavigationBar() 
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.light,
    statusBarColor: Colors.grey.shade900,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: Colors.grey.shade900,
    systemNavigationBarDividerColor: Colors.grey.shade900,
    systemNavigationBarIconBrightness: Brightness.light,
  ),
);


 void _lightStatusAndNavigationBar() 
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark,
    statusBarColor: Colors.white,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarDividerColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
  ),
);

如果仍有不明白的地方，请询问。 :)

【参考方案2】：

您可以像这样更改主题。

MaterialApp(
    themeMode: ThemeMode.light, // Change it as you want
    theme: ThemeData(
        primaryColor: Colors.white,
        primaryColorBrightness: Brightness.light,
        brightness: Brightness.light,
        primaryColorDark: Colors.black,
        canvasColor: Colors.white,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.light)),
    darkTheme: ThemeData(
        primaryColor: Colors.black,
        primaryColorBrightness: Brightness.dark,
        primaryColorLight: Colors.black,
        brightness: Brightness.dark,
        primaryColorDark: Colors.black,      
        indicatorColor: Colors.white,
        canvasColor: Colors.black,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.dark)),
...

【讨论】：

感谢您的代码。我就是按照你展示的方式来做的。但我发现，在我的应用程序中，只有 SystemChrome 功能适用于所有屏幕。但可以肯定的是，我会试试这个并给出反馈。 :)

问题是。我不在我的应用程序中使用 appBar。在没有屏幕。并且我会改变系统的StatusBar和NavigationBar的颜色。它应该看起来像在 Instagram 上。孔屏应覆盖背景色。