Flutter中如何用SharedPreferences存储List<List<Color>>类型数据

问题根源 #

Color类并非JSON可序列化类型，直接用jsonEncode处理会触发序列化错误；而toString()存储的字符串格式松散，解析时需要手动处理格式，极易出错且维护成本高。

解决方案 #

核心思路是将Color对象转换为其底层的整数值（通过Color.value获取）进行存储，读取时再将整数还原为Color对象。

1. 存储嵌套Color列表 #

先把List<List<Color>>转换为List<List<int>>，再序列化后存入SharedPreferences：

final prefs = await SharedPreferences.getInstance();
// 将每个Color转换为对应的int值
final List<List<int>> colorValueList = predefinedGradients
    .map((gradient) => gradient.map((color) => color.value).toList())
    .toList();
// 序列化并存储
await prefs.setString('SS_BRANDCOLOR_LIST_1', jsonEncode(colorValueList));

2. 读取并还原嵌套Color列表 #

读取存储的JSON字符串，解析为整数列表后再转换回Color对象：

final prefs = await SharedPreferences.getInstance();
final String? storedData = prefs.getString('SS_BRANDCOLOR_LIST_1');

if (storedData != null) {
  // 解析为List<List<int>>格式
  final List<List<int>> colorValueList = List.from(
    jsonDecode(storedData).map((gradient) => List<int>.from(gradient)),
  );
  // 将整数转换回Color对象
  final List<List<Color>> restoredGradients = colorValueList
      .map((gradient) => gradient.map((value) => Color(value)).toList())
      .toList();
  // 此处可使用restoredGradients
} else {
  // 无存储数据时使用默认列表
  final List<List<Color>> restoredGradients = predefinedGradients;
}

3. 封装工具方法（可选） #

为了提升复用性，可将存储和读取逻辑封装为工具类：

class GradientStorage {
  static const String _storageKey = 'SS_BRANDCOLOR_LIST_1';

  static Future<void> saveGradients(List<List<Color>> gradients) async {
    final prefs = await SharedPreferences.getInstance();
    final colorValues = gradients
        .map((gradient) => gradient.map((color) => color.value).toList())
        .toList();
    await prefs.setString(_storageKey, jsonEncode(colorValues));
  }

  static Future<List<List<Color>>> loadGradients(
      List<List<Color>> defaultValue) async {
    final prefs = await SharedPreferences.getInstance();
    final storedData = prefs.getString(_storageKey);
    
    if (storedData == null) return defaultValue;

    final colorValues = List.from(
      jsonDecode(storedData).map((gradient) => List<int>.from(gradient)),
    );
    return colorValues
        .map((gradient) => gradient.map((value) => Color(value)).toList())
        .toList();
  }
}

// 使用示例
// 存储
await GradientStorage.saveGradients(predefinedGradients);
// 读取
final gradients = await GradientStorage.loadGradients(predefinedGradients);

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