如何在Flutter中实现Material 3动态色彩并替代primarySwatch？

阿华AIGC实验室

2026-4-28

嘿，我来帮你搞定Material 3的动态色彩配置，替换掉原来的primarySwatch其实比你想的简单，而且动态色彩的实现也有明确的步骤，咱们一步步来：

第一步：抛弃primarySwatch，改用Material 3的ColorScheme

primarySwatch是Material 2时代的配置方式，Material 3用ColorScheme来定义整套色彩系统，它包含了主色、次色、中性色以及对应的文字/图标色彩，更贴合Material Design 3的设计规范。

你只需要在ThemeData里开启useMaterial3: true，然后通过colorScheme来配置色彩，替代原来的primarySwatch：

// 基础的Material 3主题配置（非动态）
ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 用种子色生成整套色彩
)

第二步：实现Material 3动态色彩的具体方法

既然你已经装了动态色彩库（应该是dynamic_color包吧？），咱们分两种场景来实现：

1. 基于系统的动态色彩（Android 12+/iOS 15+）

这种方式会读取系统的主题色彩（比如Android的壁纸提取色、iOS的系统主题色），自动生成适配的ColorScheme，步骤如下：

首先在你的MaterialApp外层包裹DynamicColorBuilder，它会自动获取系统的动态色彩，同时提供 fallback 方案（当设备不支持动态色彩时使用自定义种子色）：

import 'package:dynamic_color/dynamic_color.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        // 处理动态色彩
        ColorScheme lightScheme;
        ColorScheme darkScheme;

        if (lightDynamic != null && darkDynamic != null) {
          // 使用系统动态色彩，调用harmonized()让色彩更协调
          lightScheme = lightDynamic.harmonized();
          darkScheme = darkDynamic.harmonized();
        } else {
          // 设备不支持动态色彩时，用种子色生成 fallback 色彩
          lightScheme = ColorScheme.fromSeed(seedColor: Colors.deepPurple);
          darkScheme = ColorScheme.fromSeed(
            seedColor: Colors.deepPurple,
            brightness: Brightness.dark,
          );
        }

        return MaterialApp(
          title: 'Material 3 Demo',
          theme: ThemeData(
            useMaterial3: true,
            colorScheme: lightScheme,
          ),
          darkTheme: ThemeData(
            useMaterial3: true,
            colorScheme: darkScheme,
          ),
          themeMode: ThemeMode.system, // 跟随系统明暗模式
          home: const HomePage(),
        );
      },
    );
  }
}

2. 自定义动态色彩（从图片/用户选色生成）

如果想自己控制动态色彩的来源（比如从用户上传的图片提取主色），可以用ColorScheme.fromImageProvider或者ColorScheme.fromSeed：

从图片提取色彩：

// 从网络图片生成亮色/暗色色彩方案
final lightScheme = ColorScheme.fromImageProvider(
  provider: NetworkImage('https://your-image-url.jpg'),
  brightness: Brightness.light,
);

final darkScheme = ColorScheme.fromImageProvider(
  provider: NetworkImage('https://your-image-url.jpg'),
  brightness: Brightness.dark,
);

从用户选择的颜色生成：

// 用户选择一个颜色作为种子色，生成整套色彩
final userSelectedColor = Colors.teal;
final lightScheme = ColorScheme.fromSeed(seedColor: userSelectedColor);
final darkScheme = ColorScheme.fromSeed(seedColor: userSelectedColor, brightness: Brightness.dark);

第三步：在组件中正确使用Material 3色彩

配置好ColorScheme后，组件里不要再用Theme.of(context).primaryColor这类Material 2的属性了，改用ColorScheme里的对应值，比如：

// 示例：用Material 3色彩配置按钮
ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Theme.of(context).colorScheme.primary, // 主色
    foregroundColor: Theme.of(context).colorScheme.onPrimary, // 主色上的文字/图标色
  ),
  onPressed: () {},
  child: const Text('Primary Button'),
);

// 示例：用Surface色彩作为卡片背景
Card(
  color: Theme.of(context).colorScheme.surface,
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Text(
      'Card Content',
      style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
    ),
  ),
);

注意事项