持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
flex_color_scheme | Flutter Package (flutter-io.cn)
译时版本：6.0.1
FlexColorScheme
使用 FlexColorScheme 制作基于 Flutter Material 设计主题的漂亮的配色方案，有可选的首要颜色表面融合、或者主体颜色为种子的颜色主题。 这些主题基于同样的概念作为 Flutter 的配色方案为基础的主题，但是提供了一些额外的特性、和大量预制的主题。
当正确设置 Flutter 应用的主题时，所有的内置组件使用设置的主题 的ColorScheme里的颜色。至少理论上，如果你使用 ThemeData.from 工厂类定义 ThemeData 时，基本是这ppppp样的，但是会丢失一些细节。
FlexColorScheme 确保所有的 Flutter SDK UI 组件都通过它的配色方案和提供的颜色设置了主题。它会为 ThemeData 中所有的颜色属性应用有效的 ColorScheme 配色，只要这些属性仍然存在。
这确保 ThemeData 中所有直接的颜色属性匹配你的 ColorScheme 。
ThemeData 中不会有不匹配你的 ColorScheme 的惊喜。
你可以选择使用固有的子主题组件。 这样做，你可以例如使用一个属性值调整所有 UI 组件的边框圆角半径。Flutter 的 Material UI 组件默认是基于 Material 2 的设计，因此大多数组件使用 4dp 的边框圆角半径。
当你选择使用组件的子主题时，组件的边框圆角半径默认是 Material 3 指南指定的新的圆角，这里的半径根据组件的类型而有所不同。 你可以保持这个配置，或者设置为你喜欢的全局的组件半径。 你也可以轻易地设置每个组件主题的圆角半径，然后覆写 Material 3 的默认值、或者你定义的全局半径值。
使用 FlexColorScheme 组件主题，你使用简单平铺的属性值，不需要冗长的 Flutter SDK 组件的子主题，对于多个组件主题使用 ShapeBorder 定义来改变它们的边框圆角半径。组件的主题通过简单平铺的属性提供大量的可轻易配置项，代替了复杂的嵌套形式。在很多情况下，你也可以避免复杂且易混淆的 MaterialState 主题属性。
FlexColorScheme 有很多强大的配置主题，例如使用 Surface Alpha 融合。
它也基于配色主题完全支持 Materail 3 ，包括用种子生成的 ColorSchemes 。
它提供了不同的配置选项，使你可以从主体颜色生成你的 ColorScheme、定制现在 FLutter 中不可用的特性。这包括使用多重主体颜色作为种子、为 ColorScheme 颜色定制最小的色彩浓度值和定制色调。
开始使用
要在工程中使用 FlexColorScheme ，添加 flex_color_scheme 包到 pubspec.yaml 中：
dart pub add flex_color_scheme 或者 flutter pub add flex_color_scheme
导入包以使用它：
import 'package:flex_color_scheme/flex_color_scheme.dart';
现在可以在你的应用中开始使用 FlexColorScheme 为基础的配色方案和主题。 要做到这一点的一个快捷方式是使用 40 的一个内置配色方案。它有枚举值，这样你可以用来选择其中一个作为你的应用的主题。
包中的 默认示例 提供了一个充分注释的代码指南用来说明如何使用 FlexColorScheme 中的几乎每一个属性。这些示例 章节展示了如何使用，和五个向导 示例一样。
FlexColorScheme 计数器应用
首先我们在默认的 Flutter 计数器应用中安装 FlexColorScheme。 创建一个新的 Flutter 工程，即默认的计数器应用。 添加 FlexColorScheme 的导入，在我们改变一行代码之后，添加两行代码使期在默认的计数器应用中可用。
这里我们使用 Oh Mandy red 配色方案，
它是 enum（枚举）值 FlexScheme.mandyRed。
设置 MaterialApp.themeMode 为 ThemeMode.system，这样
如果应用使用了它的明亮或黑暗主题，设备也能控制。
之后可以在使用的设备上改变主题模式来切换。
配置 FlexThemeData.light 到应用的 theme 属性，
这是应用的明亮主题定义属性，
FlexThemeData.dark 是 darkTheme （黑暗主题）。
对于 FlexThemeData 的黑暗和明亮模式，我们设置 scheme 属性为 FlexScheme.mandyRed 以在两个主题模式下使用相同的 Oh Mandy red 预定义 scheme 颜色。
然后我们基于内置方案的配色定义匹配明亮或黑暗主题。
第三行修改的 MaterialApp ，是 Flutter 默认的计数器应用，变成这样：
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// Mandy red ，明亮主题。
theme: FlexThemeData.light(scheme: FlexScheme.mandyRed),
// Mandy red ，黑暗主题。
darkTheme: FlexThemeData.dark(scheme: FlexScheme.mandyRed),
// 使用系统设置的黑暗主题或明亮主题。
themeMode: ThemeMode.system,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
这样我们会得到一个看上去如下的计数器应用：
FlexColorScheme 应用于标准的 Flutter 计数器模板
感觉不像上面图片展示的这样令人兴奋，那是因为基础的计数器应用只使用了很少的特性和组件，所以结果是并没有很好呈现。
内含的示例包括了虚拟的用户接口以更好地演示结果。 示例中使用的 UI 演示代码，并不是和使用 FlexColorScheme 有关的，只是展示了结果。
文档
要获得更多的如何使用 FlexColorScheme 的信息和向导，查看 docs.flexcolorscheme.com 站点上的文档。 它包含额外的【开始使用】信息、大量的向导、预排的关键的 API ，甚至是通用的 Flutter 主题建议和向导。
请参考文档获得更多关于用法和特性的信息和向导。 文档站点由 Invertase docs.page 生成。
也有可用的完整的生成包 API 文档 。API 文档十分详尽。
Themes Playground
为了使其更容易配置和安装 FlexColorScheme ，开发了一个名为 Themes Playground 的WEB 应用。
Themes Playground 是用于发现你喜欢的 FlexColorScheme 主题和设置的很有用的工具。 你可以用其发现你能用 FlexColorScheme 做什么。 Playgound 持有所有它的设置，你可以将它们重置为它们的默认值，所以尽情体验，不用担心。
Themes Playground 最有用和最受欢迎的特性是它能生成 FlexColorScheme API 安装代码，对于生成展示可用的主题配置是必要的。 它甚至展示和修改了代码，就像你改变设置那样。 你可以在改变设置时同时看到代码。 这是熟悉 API 的一个很有趣的方式。
也要当心，fiddling with 所有的不同的主题和设置也很容易上瘾。 享受改变主题的快乐吧！💙
Themes Playground 可用作web 应用。
对于如何使用 Themes Playground 的指南，可以阅读 Themes Playground chapter 的文档。
开源代码
Themes Playground 应用是开源代码的，在示例的子文件夹中绑定 FlexColorScheme 包。在 GitHub 仓库的这里可以找到.
Playground 应用也是该包向导的最后一步。
该向导 通过它的主要使用的特性和使用 FlexColorScheme 相关联，这些特性和之前的示例不同。
它没有使用应用的所有细节。欢迎学习它的源代码进一步了解。
它有些特意地过度注释。
向导也简要地描述了一下它的背景、设计选择和限制。
Themes Playground 的旧版本
如果正在使用 FlexColorScheme 版本 5，这里你可以使用 Themes Playground V5，为其生成 API 安装代码。
如果正在使用 FlexColorScheme 版本 4，那就该需要升级，但你仍然可以用Themes Playground V4 这里，但是它没有提供任何 API 代码生成，因为版本 4 没有该特性。
