Flutter中使用sqflite存储在线图片的最优方案是什么？

为什么不推荐用BLOB存储图片？ #

• 数据库体积膨胀快：大量图片以BLOB形式存储会让SQLite数据库文件急剧变大，备份、迁移和读取性能都会受影响。
• 性能劣势：从数据库读取BLOB并转换为图片的速度，远不如直接读取本地文件系统中的缓存文件。
• 缺乏成熟缓存管理：需要自己手动实现缓存过期、空间清理等逻辑，不如现成缓存库的机制完善。

cached_network_image的优势 #

完全满足你「仅加载一次，之后本地读取」的需求，且开发成本极低：

• 底层自带本地文件缓存机制，首次加载网络图片后自动缓存，后续直接读取本地缓存。
• 支持自定义缓存策略（比如缓存时长、最大缓存容量）。
• 内置占位图、错误图处理，无需额外编写加载状态逻辑。

具体实现步骤 #

1. 添加依赖 #

在pubspec.yaml中引入库：

dependencies:
  cached_network_image: ^3.3.0 # 替换为最新版本
  sqflite: ^2.3.0
  path_provider: ^2.1.0 # 缓存库依赖，无需额外配置

2. 存储图片链接到SQLite #

继续用字符串存储API返回的图片链接即可，配合缓存库就能实现本地加载：

// 创建数据表
await db.execute('''
  CREATE TABLE items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    image_url TEXT NOT NULL
  )
''');

// 插入数据（从API获取后直接存链接）
await db.insert('items', {
  'title': apiData['title'],
  'image_url': apiData['image_url'],
});

3. 使用CachedNetworkImage加载图片 #

从数据库读取链接后，直接传入组件即可：

// 从数据库读取数据
final item = await db.query('items', where: 'id = ?', whereArgs: [1]).first;
final imageUrl = item['image_url'] as String;

// 加载图片
CachedNetworkImage(
  imageUrl: imageUrl,
  placeholder: (context, url) => CircularProgressIndicator(), // 加载中占位
  errorWidget: (context, url, error) => Icon(Icons.broken_image), // 加载错误占位
  // 可选：自定义缓存策略
  cacheManager: CacheManager(
    Config(
      'app_image_cache',
      stalePeriod: Duration(days: 30), // 缓存有效期30天
      maxNrOfCacheObjects: 150, // 最多缓存150张图片
    ),
  ),
);

特殊场景：必须用BLOB存储的情况 #

如果需要将图片与数据强绑定（比如离线场景下必须保证数据和图片一起存在），可以用BLOB存储小体积图片（比如图标），实现步骤如下：

1. 下载图片并转成Uint8List #

import 'package:http/http.dart' as http;

Future<Uint8List?> downloadImage(String url) async {
  try {
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      return response.bodyBytes;
    }
  } catch (e) {
    print('图片下载失败: $e');
  }
  return null;
}

2. 数据库表添加BLOB字段 #

await db.execute('''
  CREATE TABLE items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    image_blob BLOB
  )
''');

3. 插入与读取图片 #

// 插入数据时先下载图片
final imageBytes = await downloadImage(apiImageUrl);
await db.insert('items', {
  'title': apiData['title'],
  'image_blob': imageBytes,
});

// 读取并显示图片
final item = await db.query('items', where: 'id = ?', whereArgs: [1]).first;
final imageBytes = item['image_blob'] as Uint8List?;

if (imageBytes != null) {
  return Image.memory(imageBytes);
} else {
  return Icon(Icons.broken_image);
}

总结 #

• 绝大多数场景下，优先选择cached_network_image方案，开发效率高、性能优、维护成本低。
• BLOB仅适合小体积图片、数据与图片强绑定的特殊场景。

内容的提问来源于stack exchange，提问作者S.Beigi