介紹
在這篇博文中驰后，我們將增強應(yīng)用程序的主題，以使用從 Material 3 的操作系統(tǒng)定義的配色方案中獲取的動態(tài)顏色非春。
在 Android 12 中袁勺，Material You 引入了 Material Design 的第三次迭代嫉拐。Material 3 的主要功能之一是Dynamic Color，它允許用戶為整個操作系統(tǒng)選擇自己的配色方案魁兼，源自壁紙婉徘。
這導致一組原色、二次色和三次色在整個操作系統(tǒng)以及內(nèi)置應(yīng)用程序（如時鐘咐汞、計算器盖呼，甚至一些谷歌應(yīng)用程序（如照片））中保持一致。
您可能并不總是希望為您的應(yīng)用程序?qū)崿F(xiàn)這一點化撕，尤其是如果您的應(yīng)用程序需要遵循特定的品牌指南（并且如果顏色是您品牌的重要組成部分）几晤。但是，在某些情況下植阴，支持動態(tài)顏色主題可能有意義蟹瘾，具體取決于您的應(yīng)用和品牌。
在這篇文章中掠手，我們將使用dynamic_colorMaterial 團隊提供的 Flutter 包來增強默認的 Flutter 計數(shù)器應(yīng)用程序的動態(tài)顏色憾朴。
使用材料 3
在本教程中，我們將使用基本的 Flutter 計數(shù)器應(yīng)用程序示例喷鸽，但有一點小改動众雷。我們將從以下更改提供的主題：
ThemeData(
primarySwatch: Colors.blue,
)
對此：
ThemeData(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue),
useMaterial3: true,
)
我們這樣做是為了使用useMaterial3標志啟用材料 3。到目前為止做祝，并非 Flutter 中的所有小部件都是“Material 3-ready”砾省，因此我們需要明確啟用它。
我們替換primarySwatch為colorScheme混槐，但它們實際上做同樣的事情编兄。但是，colorScheme現(xiàn)在實際上是配置顏色的首選方式声登。我們也這樣做是因為我們將使用colorScheme動態(tài)顏色狠鸳。
我們還添加了三個框揣苏，顯示配色方案的主要顏色、次要顏色和三次顏色碰煌。這樣我們就可以比較并查看一旦我們實現(xiàn)了動態(tài)顏色舒岸，配色方案會發(fā)生什么绅作。
如果您好奇芦圾，這是我們的應(yīng)用程序在此之前和之后的外觀。
使用動態(tài)顏色
dynamic_color包裹_
Material 團隊已經(jīng)創(chuàng)建了一個包來幫助解決這個問題俄认。它返回基于平臺的動態(tài)顏色實現(xiàn)的 Material 顏色方案个少。這實際上不僅僅針對 Material 3 和 Android！
從包的GitHub 存儲庫頁面眯杏，您可以從每個平臺獲得以下信息：
- Android（12 及更高版本）- 來自壁紙的顏色
- Linux - GTK+ 主題
@theme_selected_bg_color - macOS - 應(yīng)用強調(diào)色
- 窗戶 - 強調(diào)色或窗戶/玻璃顏色
讓我們安裝軟件包：
flutter pub add dynamic_color
或者夜焦，將其添加到您的pubspec.yaml：
dependencies:
dynamic_color: ^1.4.0
小DynamicColorBuilder部件
現(xiàn)在讓我們利用dynamic_color包來實際使用動態(tài)顏色。我們可以DynamicColorBuilder使用 構(gòu)建器小部件來做到這一點岂贩，它使用引擎蓋下的插件從操作系統(tǒng)獲取動態(tài)顏色并返回淺色和深色配色方案茫经。
DynamicColorBuilder({
Key? key,
required this.builder,
})
DynamicColorBuilder接受一個可選鍵并需要一個構(gòu)建器，該構(gòu)建器應(yīng)該返回我們想要使用動態(tài)顏色增強的任何小部件萎津。構(gòu)建器小部件的簽名如下所示：
Widget Function(
ColorScheme? lightDynamic,
ColorScheme? darkDynamic,
)
我們可以返回一個小部件卸伞，任何小部件，并且構(gòu)建器包括一個淺色動態(tài)配色方案以及一個深色動態(tài)配色方案锉屈。兩種配色方案都可以為空荤傲；如果操作系統(tǒng)不響應(yīng)或平臺不支持動態(tài)顏色（如舊的 Android 版本），則返回null.
使用動態(tài)配色方案
我們現(xiàn)在已經(jīng)dynamic_color安裝了包颈渊，并且知道DynamicColorBuilder小部件是如何工作的遂黍。讓我們用它來利用系統(tǒng)的配色方案。
下面是build我們的根MyApp小部件的方法現(xiàn)在的樣子：
@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'),
);
});
}
我們已經(jīng)MaterialApp用DynamicColorBuilder. 對于主題俊嗽，我們將之前的替換colorScheme為建造者提供的淺色方案雾家。我們還提供了一個darkTheme除了theme，它使用了構(gòu)建器提供的深色方案绍豁。請注意榜贴，由于兩種配色方案都可以為空，因此我們有默認配色方案妹田，我們已將其提取為靜態(tài)常量唬党。
static final _defaultLightColorScheme =
ColorScheme.fromSwatch(primarySwatch: Colors.blue);
static final _defaultDarkColorScheme = ColorScheme.fromSwatch(
primarySwatch: Colors.blue, brightness: Brightness.dark);
這些正是我們之前所擁有的，另外還有我們以完全相同的方式定義的深色方案鬼佣，以及dark亮度值驶拱。
就是這樣！只需添加少量代碼（如果不計算默認配色方案晶衷，則少于 10 行）蓝纲，我們就有了一個配色方案的主題阴孟，該配色方案會根據(jù)您的操作系統(tǒng)設(shè)置動態(tài)變化。這是它現(xiàn)在的樣子：
如果您正在為您的應(yīng)用程序?qū)崿F(xiàn)此功能税迷，請注意一點永丝。在調(diào)試模式下，當應(yīng)用程序第一次加載時箭养，您可能會很快看到應(yīng)用程序使用默認配色方案加載一瞬間慕嚷，然后再使用動態(tài)配色方案刷新。不過不用擔心毕泌，您的生產(chǎn)應(yīng)用程序不會出現(xiàn)這種情況喝检！
包起來
在本教程中，我們展示了如何在 Flutter 應(yīng)用程序的主題中實現(xiàn)動態(tài)顏色撼泛，以利用 Android 12 中提供的 Material 3 或 You 動態(tài)顏色功能挠说。
您可以在此處找到完整的源代碼。
文章鏈接：https://dartling.dev/dynamic-theme-color-material-3-you-flutter
