Flutter项目primary swatch报错 选择颜色时无法识别该怎么解决

primarySwatch 属性仅支持接收 MaterialColor 类型的参数，若传入普通 Color 类型就会触发类型不匹配的报错红线，按照以下步骤排查即可解决：

1. 检查赋值类型是否正确 #

• 错误写法示例（直接传Color类型）：

ThemeData(
  // 错误：传入了Color类型值
  primarySwatch: Color(0xFF1A73E8),
)

• 无自定义颜色需求时，直接使用Flutter内置的MaterialColor常量即可，这些常量默认符合类型要求：

ThemeData(
  // 正确：Flutter内置的Colors.blue是MaterialColor类型
  primarySwatch: Colors.blue,
)

2. 自定义颜色转换方案 #

如果需要使用自定义色值作为primarySwatch，先封装通用转换方法，将普通Color转为MaterialColor：

// 自定义Color转MaterialColor工具方法
MaterialColor generateMaterialColor(Color color) {
  List<double> shadeLevels = [0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
  Map<int, Color> colorSwatch = {};
  final int r = color.red, g = color.green, b = color.blue;

  for (var level in shadeLevels) {
    final double ds = 0.5 - level;
    colorSwatch[(level * 1000).round()] = Color.fromRGBO(
      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
      1,
    );
  }
  return MaterialColor(color.value, colorSwatch);
}

调用方法传入自定义色值即可：

ThemeData(
  primarySwatch: generateMaterialColor(const Color(0xFF1A73E8)),
)

3. 异常场景排查 #

• 确认文件头部已引入material依赖：import 'package:flutter/material.dart';，缺省会导致类型识别失败
• 执行flutter clean清理缓存后重新编译，排除旧缓存导致的类型校验异常
• 确认属性名拼写正确，不要和primaryColor混淆，后者接收的是Color类型，二者不可混用

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