Pub Version codecov License

FlexSeedScheme

Flutter ColorScheme.fromSeed 的更灵活版本。

注意： 这是最终软件包的预发布开发版本。此版本旨在与 Flutter master 3.1.0-0.0.pre.2199 或更高版本配合使用。它不适用于 Flutter beta 3.1.0-0.5.pre 或 flutter stable 3.0.x。此软件包的第一个稳定版本，旨在用于 Flutter 稳定频道，将在 Flutter 3.3.0 stable 发布后发布。

像使用 ColorScheme.fromSeed 一样使用此包，但具有以下附加功能：

  • 使用单独的关键颜色为 ColorScheme 中的 primary、secondary 和 tertiary 颜色生成基于种子的色调调色板。
  • 更改在 Google HCT 颜色空间中用于色调调色板生成的 Material 3 默认策略的色度限制和值。
  • 更改生成的色心调色板中的哪些色调由哪个 ColorScheme 颜色使用。更改仅限于来自每个 ColorScheme 颜色的正确色心调色板的色调，但可以使用其中的任何色调。
  • 使用两个额外的色调调色板色调，即 5 和 98。它们可用于在色调调色板的浅色和深色端提供更多保真度，并在使用自定义色调映射时映射到 ColorScheme 颜色。色调 98 在基于 Web 的 Material 3 主题生成器 中也可用，但不包含在 Material 3 设计指南 中，该指南明确提到了十三种色调，并排除了色调 98。使用 FlexSeedScheme，您可以使用十五种色调，包括 98 和 5。

后台

此包已从 FlexColorScheme 包中的可自定义 SeedColorScheme.fromSeeds 引擎提取到其自己的包中。

这使得开发人员无需使用 FlexColorScheme 包即可使用 FlexColorScheme 所使用的相同可自定义 ColorScheme 种子算法。从 FlexColorScheme 6.0 及更高版本开始，它依赖于此包。

如果您使用 FlexColorScheme 6.0 或更高版本，则无需添加 FlexSeedScheme 即可使用其功能，FlexColorScheme 也导出其 API。如果您使用 FlexColorScheme，通常不需要直接使用 FlexSeedScheme，它的用法已内置，并根据您配置 FlexColorScheme 的方式使用。

入门

将 flex_seed_scheme 包添加到 pubspec.yaml

dart pub add flex_seed_scheme 或 flutter pub add flex_seed_scheme

用法

导入包以使用它

import 'package:flex_seed_scheme/flex_seed_scheme.dart';

定义将用于生成种子生成的 ColorScheme 的种子颜色。

// Define your seed colors.
const Color primarySeedColor = Color(0xFF6750A4);
const Color secondarySeedColor = Color(0xFF3871BB);
const Color tertiarySeedColor = Color(0xFF6CA450);

使用 SeedColorScheme.fromSeeds 创建更灵活的种子生成的 ColorScheme。它的工作方式与 ColorScheme.fromSeed 类似，但它不仅接受单个种子颜色，还可以使用三个关键颜色作为种子颜色，分别对应 ColorScheme 中的每个主要颜色组。

还可以定义与 Material 3 默认值不同的色度限制，用于其色调调色板生成。此外，还可以通过传递给 tones 的 FlexTones 来自定义色调映射，它定义了哪个色调由哪个 ColorScheme 颜色使用。

通常，您应该使用相同的关键颜色和色调设置来生成浅色和深色主题模式的 ColorScheme。这确保了浅色和深色主题使用相同的生成的色调调色板，并且仅根据在浅色和深色模式下用于什么颜色的色调而有所不同。这会产生匹配的浅色和深色主题颜色。但这只是常态，请随时尝试。

    // Make a light ColorScheme from the seeds.
    final ColorScheme schemeLight = SeedColorScheme.fromSeeds(
      brightness: Brightness.light,
      // Primary key color is required, like seed color ColorScheme.fromSeed.
      primaryKey: primarySeedColor,
      // You can add optional own seeds for secondary and tertiary key colors.
      secondaryKey: secondarySeedColor,
      tertiaryKey: tertiarySeedColor,
      // Tone chroma config and tone mapping is optional, if you do not add it
      // you get the config matching Flutter's Material 3 ColorScheme.fromSeed.
      tones: FlexTones.vivid(Brightness.light),
    );

    // Make a dark ColorScheme from the seeds.
    final ColorScheme schemeDark = SeedColorScheme.fromSeeds(
      brightness: Brightness.dark,
      primaryKey: primarySeedColor,
      secondaryKey: secondarySeedColor,
      tertiaryKey: tertiarySeedColor,
      tones: FlexTones.vivid(Brightness.dark),
    );

可以为 ColorScheme 中的 primary、secondary 和 tertiary 颜色提供单独的关键颜色作为种子，以从不同的关键颜色进行种子生成。如果未提供 secondaryKey 和/或 tertiaryKey 的关键颜色，则它们使用 primaryKey 颜色作为其种子颜色值。

如果您仅指定 primaryKey 颜色作为种子，并且没有自定义 tones 配置，则会产生与 ColorScheme.fromSeed 相同的 ColorScheme 结果。

ColorScheme.fromSeed 中用于次要和三级颜色的种子生成的默认色度限制在 HCT 颜色空间中具有相当低的色度值。这使得颜色相当柔和或类似粉彩。特别是对于次要颜色。这是标准 Material 3 颜色调色板的设计。您可以通过将自定义 FlexTones 配置传递给 tones 来调整此行为。有一些预制的配置可供您使用，上面使用了 FlexTones.vivid。也很容易创建完全自定义的配置。查看 FlexTones 并使用预制定义作为您自己配置的灵感。

使用上述配置，将按从上到下的顺序列出生成的以下核心调色板：

  • Primary tonal palette（主色调调色板）
  • Secondary tonal palette（次要色调调色板）
  • Tertiary tonal palette（三级色调调色板）
  • Error tonal palette（错误色调调色板）
  • Neutral tonal palette（中性色调调色板）
  • Neutral variant tonal palette（中性变体色调调色板）

palettes

使用示例 FlexTones.vivid 设置，浅色 ColorScheme 映射如下所示：

colorscheme

以及深色配色方案如下：

colorscheme_dark

定义 ThemeData

在您的 MaterialApp 中，您将像使用任何其他 ColorScheme 一样，使用种子生成的 ColorScheme 来定义您的浅色和深色模式主题。例如：

  @override
    Widget build(BuildContext context) {
      return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'SeedColorScheme.fromSeeds Demo',
      themeMode: ThemeMode.system,  
      theme: ThemeData.from(
        colorScheme: schemeLight,
        useMaterial3: true,
      ),
      darkTheme: ThemeData.from(
        colorScheme: schemeDark,
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }

覆盖颜色值

种子生成的 ColorScheme 中的所有颜色都可以通过在 SeedColorScheme.fromSeeds 中为每个 ColorScheme 颜色属性提供给定的颜色值来覆盖。此功能等同于 ColorScheme.fromSeed。

这通常用于为 primary 颜色分配给定的颜色值，它通常用作应用程序品牌颜色。当品牌颜色用作 primaryKey 和种子颜色时，它通常不会成为种子生成的 ColorScheme 中的 primary 颜色。通常需要将给定品牌颜色作为 primary 颜色。要将种子颜色作为您的 primary 品牌颜色，请也将用作 primaryKey 的颜色分配给 primary 颜色。

    // Make a light ColorScheme from the seeds.
    final ColorScheme schemeLight = SeedColorScheme.fromSeeds(
      brightness: Brightness.light,
      // Use a "brand" seed color as primary color in the result.
      primary: primarySeedColor,
      //
      primaryKey: primarySeedColor,
      secondaryKey: secondarySeedColor,
      tertiaryKey: tertiarySeedColor,
      tones: FlexTones.vivid(Brightness.light),
    );

此策略对于浅色模式 ColorScheme 非常有效，因为公司通常定义的突出品牌颜色旨在印在白纸上。如果您有要使用的次要品牌颜色，将它们用作 secondaryKey 和 tertiaryKey 的种子也有效。它们与 Material 3 颜色系统的需求匹配的程度，如果直接将它们作为 SeedColorScheme.fromSeeds 中的颜色分配给 secondary 和 tertiary，将取决于它们是什么颜色。

公司很少有适合在深色模式下获得良好对比度的品牌颜色。在这种情况下，请优先使用与浅色模式相同的品牌颜色作为种子来生成深色模式 ColorScheme。如果它们确实有深色模式规范，并且颜色与浅色模式具有相同的色相，请考虑仍然使用浅色模式颜色作为种子源，并且仅根据需要将适当的深色模式颜色应用于 primary、secondary 和 tertiary。

如果有一个规范要求在深色模式下使用完全不同的主颜色（使用不同的色相），那么从它们进行种子生成，并将 primary、secondary 和 tertiary 设置为这些颜色值是合适的。

可访问性

您可以使用 FlexTones 创建一个种子生成的 ColorScheme，该 ColorScheme 基于您的标准主题的浅色和深色方案颜色，但使用了色度配置和色调映射设置，与标准的浅色和深色主题设置相比，对比度进一步提高。

为此，有两种高对比度 FlexTones 配置。它们被称为 FlexTones.highContrast（多彩高对比度版本）和 FlexTones.ultraContrast（一个不太多彩的版本，具有更纯粹的深色背景和浅色背景结果）。

// Make a high contrast light ColorScheme from the seeds.
final ColorScheme schemeLightHc = SeedColorScheme.fromSeeds(
  brightness: Brightness.light,
  primaryKey: primarySeedColor,
  secondaryKey: secondarySeedColor,
  tertiaryKey: tertiarySeedColor,
tones: FlexTones.highContrast(Brightness.light),
);

// Make a ultra contrast dark ColorScheme from the seeds.
final ColorScheme schemeDarkHc = SeedColorScheme.fromSeeds(
  brightness: Brightness.dark,
  primaryKey: primarySeedColor,
  secondaryKey: secondarySeedColor,
  tertiaryKey: tertiarySeedColor,
  tones: FlexTones.ultraContrast(Brightness.dark),
);

如果您然后根据这些方案为您的标准 MaterialApp、theme 和 darkTheme 定义定义了等效的 ThemeData，但将它们分配给 highContrastTheme 和 highContrastDarkTheme，您将获得更具可访问性的主题颜色，这些颜色基于相同的颜色，但对比度更高，当用户在设备辅助功能系统设置中选择高对比度主题时，这些颜色将被激活。

      // Define accessibility high contrast versions using same color base.
      //
      highContrastTheme: ThemeData.from(
        colorScheme: schemeLightHc,
        useMaterial3: true,
      ),
      highContrastDarkTheme: ThemeData.from(
        colorScheme: schemeDarkHc,
        useMaterial3: true,
      ),

示例应用

包含的示例应用使用上述颜色种子生成和色调映射，以浅色和深色主题模式显示。

浅色主题应用 深色主题应用
light_app dark_app

GitHub

查看 Github