Flutter 应用程序栏背景颜色来自种子不起作用

Question

我正在 Flutter 中开发一款应用程序。在此，我尝试在

useMaterial3

中使用

ThemeData

。所以我使用下面的代码在

colorScheme

中设置颜色。

static ThemeData lightThemeData = ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
    ),
    appBarTheme: AppBarTheme(
      centerTitle: true,
      elevation: 2,
      titleTextStyle: textTheme.titleLarge,
    ),
  );

我已将上面

lightThemeData

中的

Main.dart

分配给主题属性。当我运行应用程序时，AppBar 没有显示正确的颜色。请检查下面的屏幕截图。

它没有显示正确的红色。大家知道为什么会这样吗？

Flutter版本：3.0.1

注意：它适用于 Flutter v2.10.5，但不适用于 3.0.1

Answer 1

您可以使用类似的东西来获得完整的红色体验：

static ThemeData lightThemeData = ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      primary: Colors.red,
      secondary: Colors.red,
    ),
    appBarTheme: AppBarTheme(
      color: Colors.red,
      //other options
    ),
  );

或者您可以像这样使用 fromSwatch：

static ThemeData lightThemeData = ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.red),
    appBarTheme: AppBarTheme(
      color: Colors.red,
      //other options
    ),
  );

但是请确保在使用应用程序之前测试应用程序的每个部分，因为文档说：

由于历史原因，您可以提供 [primaryColor] 或 [primarySwatch] 来构造 [colorScheme]，而不是使用 [colorSchemeSeed] 或 [colorScheme]，但结果不会像使用从种子颜色。

我认为 fromSwatch 是为 Material Design 2 设计的。

以下包含外部工具：

为了对颜色进行绝对控制，有一个很好的工具：https://m3.material.io/theme-builder#/custom 从左侧栏中选择颜色，然后使用右上角的按钮导出结果（有一个 Flutter 选项）。下载的文件包含完整的方案。您可以覆盖您不喜欢的颜色并直接输入到主题中。

Answer 2

种子颜色直接用于创建主色调的色调调色板。然后，从同一色调调色板为 ColorScheme.primary 分配浅色模式的色调 40 和深色模式的色调 80。这些颜色都不会与您使用的“主要”种子颜色完全匹配，它将是与种子颜色匹配的色调调色板中的颜色，因为它是主要颜色。

---

品牌挑战

如果您出于品牌目的要求它与提供的种子颜色完全匹配，您始终可以使用原始种子颜色覆盖通过 copyWith 获得的 ColorScheme.primary。然后使用该 ColorScheme 作为应用程序 ThemeData 的输入。有点额外的步骤，但它会起作用并且看起来也不错，因为对于原色，其他颜色仍然会匹配并与该颜色同步。

Answer 3

您的应用程序生成从给定的种子颜色派生的 [ColorScheme]。

使用seedColor作为起点，构建一组色调调色板。这些色调调色板基于 Material 3 Color 系统，并提供 [ColorScheme] 所需的所有颜色。

或者，如果您希望任何小部件具有与提供的种子颜色完全相同的颜色，您应该为其提供背景和前景色，例如：

AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Theme.of(context).colorScheme.onPrimary,
      ),

使用此功能，您的应用栏将看起来与种子颜色完全相同。