在Flutter中使用 Google Material Design 3 的动态颜色

在 Flutter 中使用 Google Material Design 3 的动态颜色（Dynamic Color），可以让应用界面根据用户的系统主题或壁纸颜色生成相应的配色方案，从而增强用户体验的个性化。以下是从工程配置到颜色生成和组件使用的详细步骤，帮助初学者理解如何在 Flutter 中实现 Material Design 3 的动态颜色功能。

1. 工程配置

为了在 Flutter 中使用动态颜色支持，首先要确保项目包含必要的依赖和配置。

步骤 1：更新 Flutter 依赖项

确保你的 Flutter SDK 版本是最新的，因为动态颜色支持在 Flutter 3.3 及以上的版本中实现。然后，在 pubspec.yaml 中添加最新的 material 包：

dependencies:
  flutter:
    sdk: flutter
  material_color_utilities: ^0.1.5  # 使用 Material Color Utilities 来生成动态颜色

步骤 2：启用 Material 3

在 Flutter 项目的主题设置中启用 Material 3。可以在 MaterialApp 配置中使用 useMaterial3: true 参数。

MaterialApp(
  theme: ThemeData(useMaterial3: true),
  home: MyHomePage(),
);

2. 动态颜色生成方案

Material 3 的动态颜色生成依赖 material_color_utilities 包来从系统壁纸生成一套动态颜色方案，适配当前系统主题（浅色或深色）。Flutter 没有直接的动态颜色 API，因此需要一些平台相关的插件（如 dynamic_color 插件）来获取系统壁纸的动态色调。

安装 dynamic_color 插件

dynamic_color 插件能够在 Android 和 iOS 上获取系统的动态颜色，自动适配系统主题：

dependencies:
  dynamic_color: ^1.1.1  *# 最新版本***

动态颜色生成代码

1. 创建 ThemeData 生成函数，根据获取的动态颜色构建颜色方案。

2. 使用 DynamicColorPlugin.getCorePalette 获取系统动态颜色。

import 'package:flutter/material.dart';
import 'package:dynamic_color/dynamic_color.dart';
ThemeData buildTheme(ColorScheme? dynamicScheme, bool isDarkMode) {
  ColorScheme colorScheme = dynamicScheme ??
      (isDarkMode ? ColorScheme.dark() : ColorScheme.light());
  return ThemeData(
    colorScheme: colorScheme,
    useMaterial3: true,
  );
}

3. 在 Flutter 中配置动态主题

在 main.dart 文件的 runApp 中，通过 DynamicColorPlugin 获取系统的动态颜色，并根据系统主题选择合适的 ThemeData。

void main() {
  runApp(MyApp());
}

myapp.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        return MaterialApp(
          theme: buildTheme(lightDynamic, false),
          darkTheme: buildTheme(darkDynamic, true),
          themeMode: ThemeMode.system,
          home: MyHomePage(),
        );
      },
    );
  }
}

在上述代码中，DynamicColorBuilder 会根据设备的壁纸和系统主题自动生成 ColorScheme。buildTheme 函数则用于根据 ColorScheme 创建 ThemeData。

4. 自定义颜色方案（静态备用）

为了在动态颜色不可用时保持一致性，可以定义默认的浅色和深色 ColorScheme。

ColorScheme lightColorScheme = ColorScheme.fromSeed(seedColor: Colors.blue);
ColorScheme darkColorScheme = ColorScheme.fromSeed(
  seedColor: Colors.blue,
  brightness: Brightness.dark,
);

5. 在 Flutter 组件中使用动态颜色

配置好动态颜色方案后，可以在 Flutter 组件中使用 Theme.of(context).colorScheme 来应用动态颜色。例如，在按钮、卡片、文本等组件中使用动态颜色：

@override

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Material 3 Dynamic Color Demo'),
      backgroundColor: Theme.of(context).colorScheme.primary,
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Theme.of(context).colorScheme.primary,
              onPrimary: Theme.of(context).colorScheme.onPrimary,
            ),
            onPressed: () {},
            child: Text('Primary Button'),
          ),
          SizedBox(height: 20),
          Card(
            color: Theme.of(context).colorScheme.surface,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                'This is a card with dynamic color!',
                style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

6. 调试与测试

可以在 Android 12 或以上的设备上测试动态颜色效果，通过更改系统壁纸来观察 Flutter 应用的动态配色变化。确保在浅色和深色模式下都能正确显示。

7. 动态颜色的最佳实践

• 降级方案：在 Android 12 以下的设备上自动使用静态备用配色。

• 品牌一致性：即使使用动态颜色，也可指定品牌色 seedColor，这样动态生成的配色方案会与应用品牌色调一致。

• 测试不同环境：通过在不同设备和主题下测试应用，确保动态颜色不会影响可读性或界面层次。

通过以上步骤，便可以在 Flutter 中实现 Material Design 3 的动态颜色支持，提供更加个性化的用户界面体验。这种方法不仅保持了 Material Design 3 的一致性，还能够让界面自动适配用户的系统主题，实现更加现代化的应用设计。