Flutter中如何创建可共享的自定义颜色名称集合？

针对你的需求，推荐以下几种可复用的实现方式，其中第一种是Flutter官方推荐的最佳实践，特别适合组件库开发：

方法一：使用ThemeExtension扩展主题（推荐） #

通过自定义ThemeExtension，可以无缝将自定义颜色整合到Flutter的主题系统中，支持库内组件和业务应用复用，还能适配深色/浅色主题切换。

步骤1：定义自定义颜色扩展类 #

创建一个继承自ThemeExtension<CustomColors>的类，封装你的自定义颜色属性：

class CustomColors extends ThemeExtension<CustomColors> {
  const CustomColors({
    required this.myCustomColorName,
    required this.secondaryCustomColor,
    // 可添加更多自定义颜色
  });

  final Color myCustomColorName;
  final Color secondaryCustomColor;

  // 实现copyWith方法，支持颜色属性修改
  @override
  CustomColors copyWith({Color? myCustomColorName, Color? secondaryCustomColor}) {
    return CustomColors(
      myCustomColorName: myCustomColorName ?? this.myCustomColorName,
      secondaryCustomColor: secondaryCustomColor ?? this.secondaryCustomColor,
    );
  }

  // 实现lerp方法，支持主题过渡动画
  @override
  CustomColors lerp(ThemeExtension<CustomColors>? other, double t) {
    if (other is! CustomColors) return this;
    return CustomColors(
      myCustomColorName: Color.lerp(myCustomColorName, other.myCustomColorName, t)!,
      secondaryCustomColor: Color.lerp(secondaryCustomColor, other.secondaryCustomColor, t)!,
    );
  }

  // 提供默认颜色实例，方便库内组件默认使用
  static const defaultColors = CustomColors(
    myCustomColorName: Color(0xFF3DB4F5),
    secondaryCustomColor: Color(0xFFF53D8A),
  );
}

步骤2：扩展ThemeData简化调用 #

通过扩展ThemeData，添加快捷getter直接获取自定义颜色：

extension CustomThemeExtension on ThemeData {
  CustomColors get customColors => extension<CustomColors>() ?? CustomColors.defaultColors;
}

步骤3：在应用中配置主题 #

在MaterialApp的theme和darkTheme中注入自定义颜色扩展：

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    // 注入浅色主题的自定义颜色
    extensions: const [
      CustomColors(
        myCustomColorName: Color(0xFF3DB4F5),
        secondaryCustomColor: Color(0xFFF53D8A),
      ),
    ],
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),
    // 注入深色主题的自定义颜色
    extensions: const [
      CustomColors(
        myCustomColorName: Color(0xFF2A8BBF),
        secondaryCustomColor: Color(0xFFC4316E),
      ),
    ],
  ),
  home: const MyHomePage(),
);

调用方式 #

在组件或应用中直接通过主题获取：

Container(
  color: Theme.of(context).customColors.myCustomColorName,
)

方法二：复用ColorScheme的现有属性（临时方案） #

如果自定义颜色数量不多，可复用ColorScheme中未使用的属性（如secondaryContainer、tertiary等），无需额外扩展：

// 配置主题
MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      secondaryContainer: const Color(0xFF3DB4F5), // 将自定义颜色映射到现有属性
    ),
  ),
);

// 调用
Container(
  color: Theme.of(context).colorScheme.secondaryContainer,
)

缺点是命名不直观，不适合长期维护和库开发。

方法三：静态类结合主题（过渡方案） #

如果习惯使用静态类调用，可以将静态属性指向主题中的自定义颜色，但需要依赖全局上下文：

// 全局导航键，需在MaterialApp中配置navigatorKey
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

class AppColors {
  static Color get myCustomColorName => Theme.of(navigatorKey.currentContext!).customColors.myCustomColorName;
}

// 调用
Container(
  color: AppColors.myCustomColorName,
)

缺点是依赖全局上下文，不够优雅，不推荐作为长期方案。

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