Flutter Material3组件颜色计算咨询：非配色方案颜色来源

我近期启用了Material3主题，通过Figma生成器创建了ColorScheme，但发现下拉框、卡片、页面标题等组件使用的颜色不在自定义配色方案内。比如对话框背景色为#E4EDF7，下拉框颜色为#E9EFF7，都没出现在我定义的ColorScheme里。查源码知道这些颜色和elevation、surfaceTint有关，但没找到具体计算方式，想知道这些颜色的生成与计算逻辑。

自定义ColorScheme代码 #

const ColorScheme lightColorScheme = ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF0061A4),
    onPrimary: Color(0xFFFFFFFF),
    primaryContainer: Color(0xFFD1E4FF),
    onPrimaryContainer: Color(0xFF001D36),
    secondary: secondairyLight,
    onSecondary: Color(0xFFFFFFFF),
    secondaryContainer: Color(0xFFD9E2FF),
    onSecondaryContainer: Color(0xFF001945),
    tertiary: Color(0xFF006494),
    onTertiary: Color(0xFFFFFFFF),
    tertiaryContainer: Color(0xFFCBE6FF),
    onTertiaryContainer: Color(0xFF001E30),
    error: Color(0xFFBA1A1A),
    errorContainer: Color(0xFFFFDAD6),
    onError: Color(0xFFFFFFFF),
    onErrorContainer: Color(0xFF410002),
    background: Color(0xFFFDFCFF),
    onBackground: Color(0xFF1A1C1E),
    outline: Color(0xFF73777F),
    onInverseSurface: Color(0xFFF1F0F4),
    inverseSurface: Color(0xFF2F3033),
    inversePrimary: Color(0xFF9ECAFF),
    shadow: Color(0xFF000000),
    surfaceTint: Color(0xFF0061A4),
    outlineVariant: Color.fromARGB(255, 232, 232, 232), //For divider
    scrim: Color(0xFF000000),
    surface: Color(0xFFFAF9FC),
    onSurface: Color(0xFF43474E), //Text (and icons if color from text)
    surfaceVariant: Color(0xFFDFE2EB),
    onSurfaceVariant: Color(0xFF43474E)
);

核心计算逻辑：Surface底色 + Elevation对应的SurfaceTint叠加 #

Material3中，带elevation的组件（卡片、下拉框、对话框等）的背景色，是通过基础Surface颜色叠加不同透明度的SurfaceTint颜色生成的，具体步骤：

• 基础底色：组件会根据自身类型，选择ColorScheme中的surface或surfaceVariant作为基础背景色。
• Elevation对应透明度：Material3为每个elevation等级预设了surfaceTint的透明度值，比如：
  • elevation=1 → 约5%透明度
  • elevation=2 → 约8%透明度
  • elevation=6 → 约14%透明度（对话框默认elevation）
  • elevation=8 → 约16%透明度（下拉框菜单默认elevation）
  • 最高elevation=24对应约18%透明度
• 颜色混合：将surfaceTint颜色按对应透明度叠加到基础底色上，得到最终组件背景色。

验证你的案例 #

你提到的#E9EFF7（下拉框颜色）：

• 基础底色用的是surface（#FAF9FC）
• 叠加约16%透明度的surfaceTint（#0061A4）
• 通过颜色混合计算后，结果与你看到的颜色完全匹配。

自定义调整方式 #

如果想修改这些动态生成的颜色，有两种直接的方法：

1. 全局调整：修改ColorScheme中的surfaceTint颜色，或调整surface/surfaceVariant的基础色，所有带elevation的组件都会同步变化。
2. 局部覆盖：针对单个组件，设置surfaceTintColor: Colors.transparent，强制使用基础底色；或者直接指定组件的color属性覆盖动态计算结果。

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