Flutter如何实现缓存图片

在Flutter中，我想实现图片缓存功能以减少网络请求和提升加载速度。目前使用cached_network_image插件时遇到两个问题：1) 缓存的图片如何手动清理特定条目？2) 能否自定义缓存路径到外部存储而非默认的临时目录？希望了解原生实现方案或推荐更灵活的第三方库。

2 回复

Flutter中可通过cached_network_image包缓存网络图片，自动管理内存与磁盘缓存。也可用flutter_cache_manager自定义缓存策略，或手动使用dio下载并保存到本地路径。

更多关于Flutter如何实现缓存图片的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现图片缓存，主要有以下几种方式：

1. 使用cached_network_image包（推荐）

这是最常用的图片缓存方案，专门用于网络图片的缓存。

安装依赖：

dependencies:
  cached_network_image: ^3.3.0

基本用法：

CachedNetworkImage(
  imageUrl: "https://example.com/image.jpg",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

高级配置：

CachedNetworkImage(
  imageUrl: "https://example.com/image.jpg",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
      ),
    ),
  ),
  placeholder: (context, url) => Container(
    width: 50,
    height: 50,
    child: CircularProgressIndicator(),
  ),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

2. 使用Image.network的缓存机制

Flutter自带的Image.network也有基础缓存：

Image.network(
  'https://example.com/image.jpg',
  cacheWidth: 300,  // 缓存指定宽度
  cacheHeight: 300, // 缓存指定高度
)

3. 手动缓存管理

使用dio或http包下载图片并缓存到本地：

import 'package:dio/dio.dart';
import 'package:path_provider/path_provider.dart';

class ImageCacheManager {
  static Future<File> cacheImage(String url) async {
    final directory = await getTemporaryDirectory();
    final file = File('${directory.path}/${_getFileName(url)}');
    
    if (await file.exists()) {
      return file;
    }
    
    final response = await Dio().get(
      url,
      options: Options(responseType: ResponseType.bytes),
    );
    
    await file.writeAsBytes(response.data);
    return file;
  }
  
  static String _getFileName(String url) {
    return url.split('/').last;
  }
}

4. 缓存配置和清理

// 设置缓存大小
CachedNetworkImage(
  imageUrl: url,
  cacheManager: CacheManager(Config(
    'custom-cache-key',
    maxNrOfCacheObjects: 100,
    stalePeriod: Duration(days: 7),
  )),
)

// 清理缓存
await DefaultCacheManager().emptyCache();

推荐使用cached_network_image，它提供了完整的缓存解决方案，包括内存缓存、磁盘缓存和错误处理，是Flutter社区中最成熟的图片缓存方案。

回到顶部