在Dart/Flutter中如何动态获取自定义颜色的色阶（Swatch）

系统自带的Colors.red这类颜色属于MaterialColor类型，内部预定义了从shade50到shade900的色阶，所以可以直接通过shadeX调用。但自定义的Color实例（编译期未知）是普通Color类型，没有这类预定义属性，需要手动实现亮度调整逻辑来模拟shade效果。

下面是一个可以直接使用的实现函数，逻辑对齐MaterialColor的色阶亮度变化规则：

Color getSwatch(Color color, int swatch) {
  // swatch取值范围建议为50、100、200...900，和系统色阶命名规则一致
  double brightnessFactor;

  if (swatch <= 500) {
    // shade50到shade500：亮度从原颜色的1.5倍降到1倍
    brightnessFactor = 1.5 - (swatch / 1000);
  } else {
    // shade500到shade900：亮度从原颜色的1倍降到0.5倍
    brightnessFactor = 1.0 - ((swatch - 500) / 1000);
  }

  // 将颜色转为HSV色彩空间，方便调整亮度
  final hsvColor = HSVColor.fromColor(color);
  // 调整亮度值，确保不会超出0（最暗）到1（最亮）的范围
  final adjustedHsv = hsvColor.withValue((hsvColor.value * brightnessFactor).clamp(0.0, 1.0));
  
  return adjustedHsv.toColor();
}

用法示例 #

// 自定义颜色
final customBlue = Color(0xFF2196F3);
// 获取对应shade300的色阶
final customBlueShade300 = getSwatch(customBlue, 300);

补充说明 #

如果需要完全复刻Flutter官方MaterialColor的色阶计算逻辑，可以参考Flutter源码中ColorSwatch的实现——官方是通过预计算不同亮度的色值并缓存，但动态场景下只能实时计算。上述函数的亮度调整规则已经和官方逻辑对齐，能满足大部分场景需求。

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