Flutter中如何缓存网络图片以支持无网络连接时使用

当然有可行方案，下面是几种常用的实现方式：

1. 使用cached_network_image包（最便捷） #

这是社区最常用的图片缓存库，默认支持磁盘缓存，无网络时自动读取缓存内容。

• 第一步：在pubspec.yaml中添加依赖：

dependencies:
  cached_network_image: ^3.3.0 # 请使用最新版本

• 第二步：直接替换Image.network使用：

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  // 可选配置缓存参数
  cacheManager: CacheManager(
    Config(
      'customCacheKey',
      stalePeriod: Duration(days: 7), // 缓存有效期
      maxNrOfCacheObjects: 100, // 最大缓存数量
    ),
  ),
)

该包会自动处理网络请求、缓存存储与读取，无需额外编写缓存逻辑。

2. 自定义ImageProvider实现缓存 #

如果需要完全自定义缓存逻辑，可以继承ImageProvider实现自己的缓存机制：

class CachedImageProvider extends ImageProvider<CachedImageProvider> {
  final String url;
  final String cacheKey;

  CachedImageProvider(this.url, {this.cacheKey});

  @override
  Future<CachedImageProvider> obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture(this);
  }

  @override
  ImageStreamCompleter loadImage(CachedImageProvider key, ImageDecoderCallback decode) {
    return MultiFrameImageStreamCompleter(
      codec: _loadCachedImage(key, decode),
      scale: 1.0,
      informationCollector: () => [
        DiagnosticsProperty<ImageProvider>('Image provider', this),
      ],
    );
  }

  Future<Codec> _loadCachedImage(CachedImageProvider key, ImageDecoderCallback decode) async {
    final cacheDir = await getTemporaryDirectory();
    final cachePath = '${cacheDir.path}/${cacheKey ?? Uri.parse(url).pathSegments.last}';
    final file = File(cachePath);

    // 先检查本地缓存是否存在
    if (await file.exists()) {
      final bytes = await file.readAsBytes();
      return decode(await ImmutableBuffer.fromUint8List(bytes));
    }

    // 无缓存则请求网络并写入缓存
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      await file.writeAsBytes(response.bodyBytes);
      return decode(await ImmutableBuffer.fromUint8List(response.bodyBytes));
    }

    throw Exception('Failed to load image');
  }
}

使用时直接替换Image.network：

Image(image: CachedImageProvider('https://example.com/image.jpg'))

3. 结合flutter_cache_manager手动管理缓存 #

flutter_cache_manager是一个通用的缓存管理库，可以灵活控制缓存的存储位置、大小和有效期，适合需要统一管理多种资源缓存的场景：

• 添加依赖：

dependencies:
  flutter_cache_manager: ^3.3.1 # 请使用最新版本

• 使用示例：

final cacheManager = DefaultCacheManager();
final file = await cacheManager.getSingleFile('https://example.com/image.jpg');

// 通过File加载图片
Image.file(file)

该库会自动处理网络请求与缓存，无网络时返回已缓存的文件。

内容的提问来源于stack exchange，提问作者Steven J Reeves