flutter如何实现图片下载缓存

在Flutter中如何实现图片的下载和缓存功能？我想在应用中显示网络图片，但希望第一次加载后能缓存到本地，下次直接从缓存读取，避免重复下载。有没有推荐的插件或实现方案？需要注意哪些关键点，比如缓存大小管理、过期策略等？最好能提供简单的代码示例说明基本实现流程。

2 回复

使用 cached_network_image 包，可轻松实现图片下载与缓存。只需在 pubspec.yaml 中添加依赖，然后在代码中使用 CachedNetworkImage 组件即可自动处理缓存。

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


在Flutter中实现图片下载缓存，可以通过以下方法：

1. 使用cached_network_image包（推荐）

这是最常用的图片缓存解决方案：

import 'package:cached_network_image/cached_network_image.dart';

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

2. 基本配置

在pubspec.yaml中添加依赖：

dependencies:
  cached_network_image: ^3.3.0

3. 高级配置

CachedNetworkImage(
  imageUrl: "http://example.com/image.jpg",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
      ),
    ),
  ),
  placeholder: (context, url) => Container(
    color: Colors.grey[300],
    child: Icon(Icons.image),
  ),
  errorWidget: (context, url, error) => Icon(Icons.error),
  cacheManager: DefaultCacheManager(),
  maxHeightDiskCache: 1000, // 最大磁盘缓存高度
  maxWidthDiskCache: 1000,  // 最大磁盘缓存宽度
)

4. 手动管理缓存

import 'package:cached_network_image/cached_network_image.dart';

// 预加载图片
await DefaultCacheManager().getSingleFile(url);

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

// 删除特定图片缓存
await DefaultCacheManager().removeFile(url);

5. 自定义缓存管理器

class CustomCacheManager extends BaseCacheManager {
  static const key = "customCache";
  
  static CustomCacheManager _instance;
  factory CustomCacheManager() {
    _instance ??= CustomCacheManager._();
    return _instance;
  }
  
  CustomCacheManager._() : super(key,
    maxAgeCacheObject: Duration(days: 7),
    maxNrOfCacheObjects: 100
  );
  
  @override
  Future<String> getFilePath() async {
    var directory = await getTemporaryDirectory();
    return p.join(directory.path, key);
  }
}

主要特性

  • 自动缓存：首次下载后自动缓存
  • 内存缓存：提高重复加载速度
  • 磁盘缓存：持久化存储
  • 错误处理：加载失败时的备用方案
  • 占位符：加载过程中的显示内容

这种方法简单高效，适合大多数图片缓存需求。

回到顶部