介绍
在这篇博文中，我们将增强应用程序的主题，以使用从 Material 3 的操作系统定义的配色方案中获取的动态颜色。
在 Android 12 中，Material You 引入了 Material Design 的第三次迭代。Material 3 的主要功能之一是Dynamic Color，它允许用户为整个操作系统选择自己的配色方案，源自壁纸。
这导致一组原色、二次色和三次色在整个操作系统以及内置应用程序（如时钟、计算器，甚至一些谷歌应用程序（如照片））中保持一致。
您可能并不总是希望为您的应用程序实现这一点，尤其是如果您的应用程序需要遵循特定的品牌指南（并且如果颜色是您品牌的重要组成部分）。但是，在某些情况下，支持动态颜色主题可能有意义，具体取决于您的应用和品牌。
在这篇文章中，我们将使用dynamic_colorMaterial 团队提供的 Flutter 包来增强默认的 Flutter 计数器应用程序的动态颜色。
使用材料 3
在本教程中，我们将使用基本的 Flutter 计数器应用程序示例，但有一点小改动。我们将从以下更改提供的主题：
ThemeData(
primarySwatch: Colors.blue,
)
对此：
ThemeData(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue),
useMaterial3: true,
)
我们这样做是为了使用useMaterial3标志启用材料 3。到目前为止，并非 Flutter 中的所有小部件都是“Material 3-ready”，因此我们需要明确启用它。
我们替换primarySwatch为colorScheme，但它们实际上做同样的事情。但是，colorScheme现在实际上是配置颜色的首选方式。我们也这样做是因为我们将使用colorScheme动态颜色。
我们还添加了三个框，显示配色方案的主要颜色、次要颜色和三次颜色。这样我们就可以比较并查看一旦我们实现了动态颜色，配色方案会发生什么。
如果您好奇，这是我们的应用程序在此之前和之后的外观。
使用动态颜色
dynamic_color包裹_
Material 团队已经创建了一个包来帮助解决这个问题。它返回基于平台的动态颜色实现的 Material 颜色方案。这实际上不仅仅针对 Material 3 和 Android！
从包的GitHub 存储库页面，您可以从每个平台获得以下信息：
- Android（12 及更高版本）- 来自壁纸的颜色
- Linux - GTK+ 主题
@theme_selected_bg_color - macOS - 应用强调色
- 窗户 - 强调色或窗户/玻璃颜色
让我们安装软件包：
flutter pub add dynamic_color
或者，将其添加到您的pubspec.yaml：
dependencies:
dynamic_color: ^1.4.0
小DynamicColorBuilder部件
现在让我们利用dynamic_color包来实际使用动态颜色。我们可以DynamicColorBuilder使用 构建器小部件来做到这一点，它使用引擎盖下的插件从操作系统获取动态颜色并返回浅色和深色配色方案。
DynamicColorBuilder({
Key? key,
required this.builder,
})
DynamicColorBuilder接受一个可选键并需要一个构建器，该构建器应该返回我们想要使用动态颜色增强的任何小部件。构建器小部件的签名如下所示：
Widget Function(
ColorScheme? lightDynamic,
ColorScheme? darkDynamic,
)
我们可以返回一个小部件，任何小部件，并且构建器包括一个浅色动态配色方案以及一个深色动态配色方案。两种配色方案都可以为空；如果操作系统不响应或平台不支持动态颜色（如旧的 Android 版本），则返回null.
使用动态配色方案
我们现在已经dynamic_color安装了包，并且知道DynamicColorBuilder小部件是如何工作的。让我们用它来利用系统的配色方案。
下面是build我们的根MyApp小部件的方法现在的样子：
@override
Widget build(BuildContext context) {
return DynamicColorBuilder(builder: (lightColorScheme, darkColorScheme) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: lightColorScheme ?? _defaultLightColorScheme,
useMaterial3: true,
),
darkTheme: ThemeData(
colorScheme: darkColorScheme ?? _defaultDarkColorScheme,
useMaterial3: true,
),
themeMode: ThemeMode.dark,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
});
}
我们已经MaterialApp用DynamicColorBuilder. 对于主题，我们将之前的替换colorScheme为建造者提供的浅色方案。我们还提供了一个darkTheme除了theme，它使用了构建器提供的深色方案。请注意，由于两种配色方案都可以为空，因此我们有默认配色方案，我们已将其提取为静态常量。
static final _defaultLightColorScheme =
ColorScheme.fromSwatch(primarySwatch: Colors.blue);
static final _defaultDarkColorScheme = ColorScheme.fromSwatch(
primarySwatch: Colors.blue, brightness: Brightness.dark);
这些正是我们之前所拥有的，另外还有我们以完全相同的方式定义的深色方案，以及dark亮度值。
就是这样！只需添加少量代码（如果不计算默认配色方案，则少于 10 行），我们就有了一个配色方案的主题，该配色方案会根据您的操作系统设置动态变化。这是它现在的样子：
如果您正在为您的应用程序实现此功能，请注意一点。在调试模式下，当应用程序第一次加载时，您可能会很快看到应用程序使用默认配色方案加载一瞬间，然后再使用动态配色方案刷新。不过不用担心，您的生产应用程序不会出现这种情况！
包起来
在本教程中，我们展示了如何在 Flutter 应用程序的主题中实现动态颜色，以利用 Android 12 中提供的 Material 3 或 You 动态颜色功能。
您可以在此处找到完整的源代码。
文章链接：https://dartling.dev/dynamic-theme-color-material-3-you-flutter