Flutter 中自定义 ColorSwatch 是什么？相关代码片段含义咨询

ColorSwatch 是 Flutter 内置的、用于管理同色系多阶深浅色的工具类，它继承自 Color，所以它的实例既可以直接作为普通颜色使用，也支持通过下标索引获取对应深浅的色值。
我们常用的 Material Design 预设颜色（例如 Colors.red、Colors.blue）本质都是 ColorSwatch 的子类 MaterialColor 的实例。

你提供的示例是自定义 MaterialColor 主题色的标准写法，逐段逻辑拆解如下：

• 首先通过 const MaterialColor yourColorName = MaterialColor(...) 声明常量色板，变量名可根据业务自定义
• 构造函数第一个入参是默认主色值，即你直接使用该色板变量（不加下标）时返回的颜色，通常会和下方色阶映射中 500 对应的色值保持一致，符合 Material 设计规范
• 第二个入参是 Map<int, Color> 类型的色阶映射表：
  • 键为色阶值，按照 Material 规范默认取 50、100~900（间隔100），数值越小对应颜色越浅，数值越大对应颜色越深
  • 值为每个色阶对应的具体颜色实例
• 声明完成后即可和系统预设颜色一样使用，示例如下：

// 直接使用默认主色（对应色阶500）
Container(color: customPrimary)
// 取浅一级的同色系颜色，用作背景
Container(color: customPrimary[100])
// 取深一级的同色系颜色，用作强调
Container(color: customPrimary[700])

• 自定义 App 全局主题时，可将自定义 MaterialColor 传给 ThemeData 的 primarySwatch 参数，Flutter 会自动适配不同组件的默认颜色深浅，不用单独配置每个组件的颜色
• 视觉需要统一使用同色系做层级区分时，比如按钮的普通态、按下态、禁用态都可以从同一块色板取色，避免零散维护多个色值变量

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