如何使用cached_network_image将网络图片长期缓存到SharedPreference中

技术上可以实现，但强烈不推荐该方案 #

SharedPreference 本身的设计定位是存储字符串、布尔值、数字这类轻量级配置数据，单条数据建议不超过100KB。而图片文件大小通常在数百KB到数MB不等，将图片转码后存入SharedPreference，会大幅拖慢配置项的读写速度，严重时甚至会引发应用卡顿、ANR异常。

如果确实需要临时用该方案实现需求，可以按以下步骤操作：

• 第一步：将网络图片转码为Base64字符串
  先下载图片的二进制字节流，再通过Base64编码将字节流转为纯文本格式，即可存入SharedPreference，Dart示例代码如下：

  import 'dart:convert';
  import 'package:shared_preferences/shared_preferences.dart';
  import 'package:http/http.dart' as http;
  
  Future<void> saveImageToSp(String imageUrl, String cacheKey) async {
    final response = await http.get(Uri.parse(imageUrl));
    if (response.statusCode == 200) {
      String base64Content = base64Encode(response.bodyBytes);
      final spInstance = await SharedPreferences.getInstance();
      await spInstance.setString(cacheKey, base64Content);
    }
  }
  

• 第二步：从SharedPreference读取并展示图片
  取出存储的Base64字符串后，解码为字节流即可直接交给Image组件渲染：

  Future<Image?> getCachedImageFromSp(String cacheKey) async {
    final spInstance = await SharedPreferences.getInstance();
    String? base64Content = spInstance.getString(cacheKey);
    if (base64Content == null) return null;
    Uint8List imageBytes = base64Decode(base64Content);
    return Image.memory(imageBytes);
  }
  

更合理的长期缓存方案 #

你不需要额外将图片存入SharedPreference，直接修改cached_network_image的缓存配置即可实现长期离线可用：

• 自定义缓存有效期，可设置为1年甚至更久，同时调整最大缓存容量上限，满足你的长期存储需求
• 如果你需要更灵活的控制逻辑，也可以直接将图片文件存入应用私有文档目录，仅在SharedPreference中存储图片的本地路径即可，该方案的读写性能比存储Base64字符串高数十倍。

内容的提问来源于stack exchange，提问作者Muhammad Tameem Rafay