Flutter 2：颜色问题

Posted 2023-02-23

【中文标题】Flutter 2：颜色问题

【英文标题】：Flutter 2: Color issues

【发布时间】：2021-06-12 17:45:32

【问题描述】：

我最近将代码基础切换到了 Flutter 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

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

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

【参考方案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 来解决您的问题。

【讨论】：

谢谢，我会试试的。但为了澄清。我从不故意更改状态栏颜色。在更改为 Flutter 2 之前，颜色设置很好。我没有改变自己的主题——我只是在内部切换到 Flutter 2。所以内部肯定发生了。但是，我尝试使用亮度属性来修复它。但它不是已经是 ThemeData.dark() 的一部分了吗？

我认为您目前仅将 ThemeData.dark() 应用于 textTheme、buttonTheme 和 inputDecorationTheme。不是整个应用程序。

非常感谢。失踪的brightness 是重点。不幸的是，我只能奖励一次赏金，但我真的很感谢你的工作！

【参考方案2】：

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

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

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

或者：

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

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

【讨论】：

在某些情况下，如果 android 操作系统设置允许用户设置深色或浅色 UI，则该设置可以覆盖您在应用内的亮度设置。至少我的一加 6T 就是这样。通过覆盖 AppBar 中的状态栏图标亮度，即使在这些情况下，问题也得到了解决。

谢谢，我会试试的。但为了澄清。我从不故意更改状态栏颜色。在更改为 Flutter 2 之前，颜色设置很好。我没有改变自己的主题——我只是在内部切换到 Flutter 2。所以内部肯定发生了。但是，我尝试使用亮度属性来修复它。但它不是已经是 ThemeData.dark() 的一部分了吗？

它是其中的一部分，但实际上您忽略了大部分属性，因为您只使用了ThemeData base 的一些属性。我已根据flutter.dev/docs/cookbook/design/…

更新了我的答案以正确使用深色主题

非常感谢。失踪的brightness 是重点。不幸的是，我只能奖励一次赏金，但我真的很感谢你的工作！

我明白了。 copyWith 实际上确实从您复制的主题中复制了所有值，包括默认值，所以 kuhnroyal 在那里错了。

【参考方案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 时要小心，因为调用它时没有设置默认值。

【讨论】：

非常感谢。丢失的brightness 才是重点。