如何在 Flutter 中缓存来自 Firebase 的图像？

Question

我正在尝试访问 Firebase 存储中的图像并将它们缓存在设备本地。

我当前的尝试使用flutter_cache_manager。文档指出：

最常见的文件服务将是 [HttpFileService]，但也可以制作更专业的东西。例如，您可以从其他应用程序或本地存储中获取文件。

class HttpFileService implements FileService {
  http.Client _httpClient;
  HttpFileService({http.Client httpClient}) {
    _httpClient = httpClient ?? http.Client();
  }

  @override
  Future<FileServiceResponse> get(String url,
      {Map<String, String> headers = const {}}) async {
    final req = http.Request('GET', Uri.parse(url));
    req.headers.addAll(headers);
    final httpResponse = await _httpClient.send(req);

return HttpGetResponse(httpResponse);

  }
}

我已尝试扩展此类以处理 Firebase 的 URL

class FirebaseHttpFileService extends HttpFileService {
  @override
  Future<FileServiceResponse> get(String url, {Map<String, String> headers = const {}}) async {

    var ref = FirebaseStorage.instance.ref().child(url);
    var _url = await ref.getDownloadURL() as String;

    return super.get(_url);
  }
}

并使用来自GitHub repo 的模板扩展 BaseCacheManager，用我的新服务替换文件服务。

class FirebaseCacheManager extends BaseCacheManager {
  static const key = "firebaseCache";

  static FirebaseCacheManager _instance;

  factory FirebaseCacheManager() {
    if (_instance == null) {
      _instance = new FirebaseCacheManager._();
    }
    return _instance;
  }

  FirebaseCacheManager._() : super(key,
      maxAgeCacheObject: Duration(days: 7),
      maxNrOfCacheObjects: 20,
      fileService: FirebaseHttpFileService());

  Future<String> getFilePath() async {
    var directory = await getTemporaryDirectory();
    return p.join(directory.path, key);
  }
}

但我收到以下错误：

setState() called after dispose(): _ImageState#50d41(lifecycle state: defunct, not mounted, stream: ImageStream#ac6d5(MultiFrameImageStreamCompleter#0c956, [2448×3264] @ 1.0x, 3 listeners), pixels: null, loadingProgress: null, frameNumber: null, wasSynchronouslyLoaded: false)

我可以在尝试检索文件之前处理 URL，但这会不必要地浪费时间。我也尝试过使用其他软件包，例如 Flutter Cache Image，但它似乎在短时间内使应用程序崩溃。

感谢您提供正确方向的任何指示！

Answer 1

这个问题实际上与问题here 中的errorWidget 有关。 如果错误小部件在CachedNetworkImage 中被注释掉，代码就可以工作。