Flutter技术问题：如何从十六进制码获取MaterialColor

核心思路 #

primarySwatch要求的是MaterialColor类型，它本质是包含不同亮度梯度的颜色映射集合。从SharedPreferences读取的十六进制字符串需先转成普通Color，再基于该颜色生成对应的MaterialColor梯度集合。

实现步骤 #

1. 读取SharedPreferences中的十六进制颜色字符串
   先获取SharedPreferences实例，读取存储的颜色值，同时处理空值或格式异常的默认情况：

final prefs = await SharedPreferences.getInstance();
String? hexColorStr = prefs.getString('primary_color');
// 为空时设置默认绿色
hexColorStr ??= '#FF4CAF50';

2. 十六进制字符串转普通Color
   编写工具方法处理格式兼容（支持带/不带#、3位缩写转6位），同时捕获转换异常：

Color hexToColor(String hexString) {
  // 移除#号
  final hex = hexString.replaceAll('#', '');
  // 处理3位缩写（如#FFF）转6位
  final fullHex = hex.length == 3 ? hex.split('').map((c) => c*2).join() : hex;
  // 补全8位（默认全不透明）
  final fullHexWithAlpha = fullHex.length == 6 ? 'FF$fullHex' : fullHex;
  return Color(int.parse(fullHexWithAlpha, radix: 16));
}

调用方法得到基础颜色：

Color baseColor;
try {
  baseColor = hexToColor(hexColorStr);
} catch (e) {
  // 格式错误时用默认蓝色兜底
  baseColor = Colors.blue;
}

3. 将Color转换为MaterialColor
   基于基础颜色生成从50到900的亮度梯度集合：

MaterialColor createMaterialColor(Color color) {
  List<int> strengths = <int>[50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
  Map<int, Color> swatch = {};
  final int r = color.red, g = color.green, b = color.blue;

  for (int strength in strengths) {
    double opacity = strength / 1000;
    swatch[strength] = Color.fromRGBO(r, g, b, opacity);
  }

  return MaterialColor(color.value, swatch);
}

生成最终可用的MaterialColor：

MaterialColor primarySwatch = createMaterialColor(baseColor);

4. 在Scaffold中使用
   直接将生成的primarySwatch传入组件：

Scaffold(
  primarySwatch: primarySwatch,
  // 其他页面组件
)

注意事项 #

• 建议存储十六进制字符串时统一格式（如带#的6位或8位字符串），减少转换异常概率。
• 务必保留异常捕获逻辑，避免因非法格式导致应用崩溃。

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