如何在Material3中扩展ColorScheme？

在Material3中，自定义扩展颜色的核心是基于ColorScheme扩展或ThemeExtension实现，替代Material2中直接在ThemeData里添加自定义颜色的方式，以下是两种常用方案：

方案一：扩展ColorScheme（快速实现） #

通过Dart扩展功能直接给ColorScheme添加自定义颜色属性，适合少量颜色的快速扩展：

1. 定义ColorScheme扩展

extension CustomColorScheme on ColorScheme {
  // 添加自定义颜色
  Color get customTeal => const Color(0xFF008080);
  Color get customOrange => const Color(0xFFF57C00);
}

2. 在组件中直接调用
   无需修改ThemeData，直接通过Theme获取扩展后的颜色：

Container(
  color: Theme.of(context).colorScheme.customTeal,
  padding: const EdgeInsets.all(16),
  child: Text(
    '自定义颜色示例',
    style: TextStyle(color: Theme.of(context).colorScheme.customOrange, fontSize: 18),
  ),
)

方案二：使用ThemeExtension（支持明暗主题） #

如果需要为明暗主题分别定义不同的自定义颜色，或者需要管理一组相关颜色，推荐使用ThemeExtension：

1. 创建自定义ThemeExtension类

class CustomColors extends ThemeExtension<CustomColors> {
  final Color customTeal;
  final Color customOrange;

  CustomColors({required this.customTeal, required this.customOrange});

  // 实现copyWith方法用于颜色修改
  @override
  CustomColors copyWith({Color? customTeal, Color? customOrange}) {
    return CustomColors(
      customTeal: customTeal ?? this.customTeal,
      customOrange: customOrange ?? this.customOrange,
    );
  }

  // 实现lerp方法用于颜色过渡动画
  @override
  CustomColors lerp(ThemeExtension<CustomColors>? other, double t) {
    if (other is! CustomColors) return this;
    return CustomColors(
      customTeal: Color.lerp(customTeal, other.customTeal, t)!,
      customOrange: Color.lerp(customOrange, other.customOrange, t)!,
    );
  }

  // 定义明主题下的自定义颜色
  static CustomColors light() => CustomColors(
        customTeal: const Color(0xFF008080),
        customOrange: const Color(0xFFF57C00),
      );

  // 定义暗主题下的自定义颜色
  static CustomColors dark() => CustomColors(
        customTeal: const Color(0xFF4DB6AC),
        customOrange: const Color(0xFFFFB74D),
      );
}

2. 在ThemeData中注册扩展

// 明主题
ThemeData lightTheme() {
  return ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    extensions: [CustomColors.light()],
  );
}

// 暗主题
ThemeData darkTheme() {
  return ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),
    extensions: [CustomColors.dark()],
  );
}

3. 在组件中调用自定义颜色

final customColors = Theme.of(context).extension<CustomColors>()!;
Container(
  color: customColors.customTeal,
  padding: const EdgeInsets.all(16),
  child: Text(
    '明暗主题自定义颜色',
    style: TextStyle(color: customColors.customOrange, fontSize: 18),
  ),
)

核心区别说明 #

• 扩展ColorScheme：实现简单，无需修改Theme配置，适合快速添加少量自定义颜色。
• ThemeExtension：支持明暗主题分离、颜色过渡动画，适合需要系统管理自定义颜色的场景。

内容的提问来源于stack exchange，提问作者BollMose