Flutter-如何在深色模式下更改状态栏文本颜色？

Question

我希望在iOS 13的暗黑模式下控制状态栏文本颜色。在没有打开暗黑模式时，我可以通过设置Scaffold的AppBar属性“brightness”来更改状态栏颜色。

代码如下：

return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,  //<--Here!!!
        title: Text(widget.title),
      ),
...

努力就像这样:

亮色模式:

暗色模式:

但是当我启用模拟器的暗色模式时，该方法不起作用。 打开模拟器的“深色外观”：

打开“深色外观”后，该方法无法再改变状态栏文字颜色，它只会显示为白色（亮度模式）。

我尝试了以下方法来改变状态栏文字颜色：

方法1：

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);
  runApp(MyApp());
}

方法二：

return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Material(
        child: Scaffold(
          appBar: AppBar(
            brightness: Brightness.light,
            title: Text(widget.title),
          ),
          body: Center(

但是它们都不能正常工作。

希望您的帮助！谢谢。

- Alexweng

Answer 1

首先转到ios/Runner文件夹。 接下来打开info.plist并将以下行添加到Dict部分。

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

下一步，请确保您在MaterialApp的主题设置中有以下几行代码：

...
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)),
...

祝你好运！

P.S. 你不再需要在这里设置亮度了：）

Scaffold(
    appBar: AppBar(
    brightness: Brightness.light,  //<--Here!!!
    title: Text(widget.title),
),

- Dmitry_Kovalov

---

"brightness"已被弃用，不应使用，请改用systemOverlayStyle。 - M Karimi

Answer 2

在 Info.plist 文件中，在 ios/Runner 目录下添加如下内容：

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

对我有用。

- m1416

Answer 3

我发现我的问题与Flutter的“Issue＃41067”完全相同——“在运行iOS 13.0的设备上，当Dark Mode没有关闭时，Flutter无法自动将状态栏图标变为黑色，只有在关闭iOS 13上的Dark Mode时才会这样做#41067"。

该问题的状态为Opening，希望尽快解决。以下是问题链接：Flutter issue#41067。

- Alexweng

Answer 4

在我的情况下，我想要在浅色主题应用程序的状态栏中使用深色字体。问题是我的应用程序栏的背景颜色是透明的，因此状态栏默认字体颜色为白色（我尝试将应用程序栏的颜色设置为白色，结果状态栏文本字体变成了黑色）。 由于我想保持透明的状态栏，我的解决方案是在我的主题的appBarTheme中添加systemOverlayStyle，如下所示：

 AppBarTheme(
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarBrightness: Brightness.light,
        ),

app_bar_theme.dart文件在亮度弃用说明中告诉了我这个解决方案：

@Deprecated( '此属性不再使用，请改用systemOverlayStyle。' '此功能在v2.4.0-0.0.pre之后被弃用。', ) this.brightness,

- Colibri

Answer 5

更改状态栏文本颜色/图标亮度。Flutter 2.2.3

MaterialApp( title: 'Flutter演示', theme: ThemeData( appBarTheme: Theme.of(context).appBarTheme.copyWith( brightness: Brightness.dark, systemOverlayStyle: SystemUiOverlayStyle( statusBarIconBrightness: Brightness.light, ), ), primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter演示主页'), );

- Faisal khan

Answer 6

如果你的应用是一个MaterialApp，你可以设置MaterialApp的darkTheme属性：

return new MaterialApp(
  darkTheme: ThemeData.dark(),
);

这里是文档链接：https://api.flutter.dev/flutter/material/MaterialApp-class.html

如果它不能解决你的问题，你可以使用以下方法创建自己的暗色主题：

return new MaterialApp(
  darkTheme: ThemeData(
    // Your theme config
  ),
);

ThemeData文档链接：https://api.flutter.dev/flutter/material/ThemeData-class.html

- Loufi

---

首先，感谢您的回复。我尝试了您的方法，设置了“darkTheme”，但是无论我设置darkTheme: ThemeData.light() //(I need the black statusbar text color) 还是我设置 darkTheme: ThemeData( //brightness: Brightness.light, primaryColorBrightness: Brightness.light, //textTheme: Typography().black, primaryTextTheme: Typography().black, ), 我都可以更改Appbar背景颜色、Appbar文本颜色以及整个应用程序的颜色和亮度，但状态栏文本颜色仍然无法更改。所以我还有什么可以尝试的呢？ - Alexweng

也许考虑到用户体验，在暗黑模式下禁止更改状态栏文本颜色。但我认为这没有意义。感觉有些无助。 - Alexweng

你好。你找到解决方案了吗？ - user2570135

Answer 7

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

这对我有用。如果你想要黑色文本，请使用：

@override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarWhiteForeground(false);
    return MaterialApp();
  } 

使用白色文本：

@override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
    return MaterialApp();
  } 

- Ammonious