如何在 flutter 中缓存来自 firebase 的图像？

Question

我一直在尝试在我的 flutter 应用程序中做一个缓存管理系统。 理想情况下，我想从 firebase 存储中检索图像并将它们与其他详细信息一起显示。 我从 firestore 检索快照并使用 cachednetworkimage 来显示图像。 但是我显示的图像数量很多，导致我的应用程序崩溃。 我相信如果我在本地缓存图像，这个问题就会得到解决。 除此之外，我还想缓存 json 文件，以便在离线模式下，我的应用程序将显示缓存的图像和缓存 memory 中可用的其他详细信息。

我想显示帖子，其中包含用户名、用户个人资料图片、图片帖子本身、标题和评论。 所以我检索帖子的方式是根据以下......

void fetchFeed() async {
auth.User currentUser = await _repository.getCurrentUser();

User user = await _repository.fetchUserDetailsById(currentUser.uid);
setState(() {
  this.currentUser = user;
});
setState(() {
  loadingPosts = true;
});
Query query =  _firestore.collection("users").doc(user.uid).collection("following").orderBy("uid").limit(perPage);
QuerySnapshot querySnapshot = await query.get();
for (var i = 0; i < querySnapshot.docs.length; i++) {
  followingUIDs.add(querySnapshot.docs[i].id);
}

for (var i = 0; i < followingUIDs.length; i++) {
  Query posts = _firestore.collection("users").doc(followingUIDs[i]).collection("posts").orderBy("time").limit(perUser);
  QuerySnapshot postSnapshot = await posts.get();
  lastPost = postSnapshot.docs[postSnapshot.docs.length -1];
  for (var i = 0; i < postSnapshot.docs.length; i++) {
    feedlist.add(postSnapshot.docs[i]);
  }
}
setState(() {
  loadingPosts = false;
});

}

在我检索到这些帖子后，我将它们放在一个列表视图中并按顺序显示它们。 我遇到的问题是，由于图像没有在本地缓存，我使用缓存的网络图像小部件来显示它们。 每当我导航到另一个页面并返回时，所有缓存的网络图像都会重新加载，这会给应用程序带来很大的负载，从而导致它崩溃。

 CachedNetworkImage(
          imageUrl: list[index].data()['imgUrl'],
          placeholder: ((context, url) => Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/Black.png'),
                    fit: BoxFit.cover),
              ))),
          fit: BoxFit.fitWidth,
        ),

或者，我尝试使用以下 function 下载图像并将其保存在本地。 对于从 firebase 检索到的每个图像项，我调用 function。 但这只是出于某种原因扭曲了图像。

Future <Null> downloadFile(String httpPath) async{
  final StorageReference ref = await FirebaseStorage.instance.getReferenceFromUrl(httpPath);
  final StorageFileDownloadTask downloadTask = ref.writeToFile(file);

  final int byteNumber = (await downloadTask.future).totalByteCount;

  print(byteNumber);

  setState(() => _cachedFile = file);

}

http 路径是我为每个图像获取的下载 url。 但我不确定这是否是下载图像的最佳方式。 由于我无法知道 firebase 存储中出现的图像文件名，因此这是我唯一的选择。

有人可以告诉我另一种下载和缓存图像的方法，以及 json 文件（包含用户名、评论、标题），以便我可以离线显示它们吗？

Answer 1

为此，请使用cached_network_image package。 它还支持占位符和加载时淡入淡出的图像。

CachedNetworkImage( imageUrl: 'https://picsum.photos/250?image=9');

完整示例

`

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: Center(
      child: CachedNetworkImage(
        placeholder: (context, url) => CircularProgressIndicator(),
        imageUrl:
            'https://picsum.photos/250?image=9',
      ),
    ),
  ),
);

`