Flutter 2：颜色问题

Question

我最近将代码基础切换到了 Flutter 2。

现在我在主题（颜色）方面遇到了一些问题：

1. 设备状态栏图标的颜色为黑色
2. TextField 的上下文菜单项的颜色为黑色

以前它们是白色的，所以在新的 Flutter 版本中似乎有所改变。

我正在使用ThemaData.dark() 和一些特定的颜色。特别是我将cardColor 设置为深灰色，为TextField 的上下文菜单的背景着色：

ThemeData buildTheme() {
  final ThemeColors colors = themeColors();
  final ThemeData base = ThemeData.dark(); 
  return ThemeData(
      scaffoldBackgroundColor: colors.primaryBackground(),        // == dark grey
      primaryColor: colors.primaryBackground(),                   // == dark grey
      accentColor: colors.accent(),                               // == orange
      textTheme: base.textTheme,
      buttonTheme: base.buttonTheme.copyWith(
          buttonColor: colors.accent(),                           // == orange
          textTheme: ButtonTextTheme.primary
      canvasColor: colors.inputBackground(),                      // == dark grey
      inputDecorationTheme: base.inputDecorationTheme.copyWith(
        hintStyle: TextStyle(color: colors.textFieldHintText()),  // == grey
        fillColor: colors.inputBackground(),                      // == dark grey
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.focused())),     // == green
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.accent())),      // == orange
      ),
      unselectedWidgetColor: colors.accent(),                     // == orange
      cardColor: colors.messageBackground());                     // == dark grey
}

1. 你知道为什么在使用新的 Flutter 版本时描述的颜色不会变成白色吗？
2. 你知道我能做些什么来解决这个问题吗？是否可以更改ThemeData 的另一个颜色字段？

我唯一的想法是删除 cardColor 更改，这会产生一个白色的上下文菜单。但这并不能解决状态栏的文字颜色问题。

Answer 1

仅限statusBar，您可以在定义AppBar时设置图标的亮度：

 AppBar(
        backwardsCompatibility: false,
        backgroundColor: Colors.grey.shade800,
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarColor: Colors.grey.shade800,
          statusBarIconBrightness: Brightness.light,
        ),
      ),

但使用此设置，您的应用栏将无法从您的主题中获取颜色。

您必须从那里设置背景颜色和 statusBarColor。

我确实设置了 Colors.grey.shade800，因为我无法访问您的颜色。

对于系统 UI，例如复制/粘贴，您可以通过在 ThemeData 中添加 brightness: Brightness.dark 来解决您的问题。

Answer 2

我不会修改AppBar 中的状态栏颜色，因为这样当您在应用程序的不同部分使用不同的应用程序栏时，您可能会在那里更改它。

我发现更改主题亮度更好，这也可以解决文本颜色主题的问题：

...
        theme: ThemeData(
          brightness: Brightness.dark,
          ...
        )
...

或者：

...
        theme: ThemeData.dark().copyWith(
          ...
        )
...

否则你可能只是使用了错误的文本主题。

Answer 3

我认为您只是缺少了一小部分。 您使用 ThemeData.dark() 创建了一个深色主题，然后使用 return ThemeData(...) 创建了一个浅色主题

而是直接使用预期的亮度创建 ThemeData，所有值 您未指定的将默认取决于亮度值 与ThemeData.dark() 创建它们的方式相同。

ThemeData buildTheme() {
  final ThemeColors colors = themeColors();
  return ThemeData(
      brightness: Brightness.dark,
      scaffoldBackgroundColor: colors.primaryBackground(),        // == dark grey
      primaryColor: colors.primaryBackground(),                   // == dark grey
      accentColor: colors.accent(),                               // == orange
      buttonTheme: ButtonThemeData(
          buttonColor: colors.accent(),                           // == orange
          textTheme: ButtonTextTheme.primary,
      ),
      canvasColor: colors.inputBackground(),                      // == dark grey
      inputDecorationTheme: InputDecorationTheme(
        hintStyle: TextStyle(color: colors.textFieldHintText()),  // == grey
        fillColor: colors.inputBackground(),                      // == dark grey
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.focused())),     // == green
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.accent())),      // == orange
      ),
      unselectedWidgetColor: colors.accent(),                     // == orange
      cardColor: colors.messageBackground(),                      // == dark grey
   );                     
}

如果你查看ThemeDatahere的实现：

你会发现这个：factory ThemeData.dark() => ThemeData(brightness: Brightness.dark);

如果您查看here，您会看到默认亮度为Brightness.light，在以下几行中，您可以找到根据brightness 值创建的默认值。

使用ThemeData.copyWith 时要小心，因为调用它时没有设置默认值。