Flutter CachedNetworkImage：如何获取缓存时间并更新缓存

核心思路 #

要实现服务器图片更新时自动清理本地缓存，需要分三步：获取服务器图片的Last-Modified时间、获取本地缓存文件的修改时间、对比两者并决定是否清理缓存。

具体实现步骤 #

1. 获取服务器的Last-Modified响应头

通过HTTP HEAD请求获取目标图片的Last-Modified头，解析为DateTime对象：

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

Future<DateTime?> getServerLastModified(String imageUrl) async {
  try {
    final response = await http.head(Uri.parse(imageUrl));
    final lastModifiedStr = response.headers['last-modified'];
    if (lastModifiedStr != null) {
      return DateTime.parse(lastModifiedStr);
    }
  } catch (e) {
    print('获取服务器Last-Modified失败: $e');
  }
  return null;
}

2. 获取本地缓存文件的修改时间

CachedNetworkImage依赖flutter_cache_manager管理缓存，通过DefaultCacheManager获取缓存文件的最后修改时间：

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

Future<DateTime?> getLocalCacheModifiedTime(String imageUrl) async {
  final fileInfo = await DefaultCacheManager().getFileFromCache(imageUrl);
  if (fileInfo != null && fileInfo.file.existsSync()) {
    return fileInfo.file.lastModified();
  }
  return null;
}

3. 对比时间并清理缓存

对比服务器和本地的时间，若服务器时间更新，则调用evictFromCache清除缓存，之后图片会重新加载最新版本：

import 'package:cached_network_image/cached_network_image.dart';

Future<void> checkAndRefreshImageCache(String imageUrl) async {
  final serverTime = await getServerLastModified(imageUrl);
  final localTime = await getLocalCacheModifiedTime(imageUrl);

  if (serverTime != null && localTime != null) {
    if (serverTime.isAfter(localTime)) {
      await CachedNetworkImage.evictFromCache(imageUrl);
      // 触发UI刷新，比如调用setState（StatefulWidget中）或通知状态管理更新
    }
  }
}

调用时机 #

可以在页面初始化时触发检查，或者在需要刷新的场景（如下拉刷新、页面重新可见）调用：

@override
void initState() {
  super.initState();
  checkAndRefreshImageCache(networkImageUrl);
}

额外说明 #

其实CachedNetworkImage默认会遵循HTTP缓存协议，若服务器正确配置了Last-Modified或ETag头，组件会自动验证缓存有效性并更新图片。如果你的需求是手动控制验证逻辑，上述方案即可满足。

内容的提问来源于stack exchange，提问作者vivek shirodkar