flutter - 如何在flutter中缓存来自firebase的图像?
问题描述
我一直在尝试在我的颤振应用程序中做一个缓存管理系统。理想情况下,我想从 firebase 存储中检索图像并将它们与其他详细信息一起显示。我从 firestore 检索快照并使用 cachednetworkimage 来显示图像。但是我显示的图像数量很多,导致我的应用程序崩溃。我相信如果我在本地缓存图像,这个问题就会得到解决。除此之外,我还想缓存 json 文件,以便在离线模式下,我的应用程序将同时显示缓存的图像和缓存中可用的其他详细信息。
我想显示帖子,其中包含用户名、用户个人资料图片、图片帖子本身、标题和评论。所以我检索帖子的方式是根据以下......
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,
),
或者,我尝试使用以下功能下载图像并将其保存在本地。我为从 firebase 检索到的每个图像项调用该函数。但这只是出于某种原因扭曲了图像。
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 文件(包含用户名、评论、标题),以便我可以离线显示它们吗?
解决方案
为此,请使用cached_network_image包。它还支持占位符和加载时淡入淡出的图像。
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',
),
),
),
);
`
推荐阅读
- ios - Problem when sending 2-layer-json-payload from FCM to iOS devices
- emacs - 用于 Markdown 和 Python 的 Emacs 多模式
- asp.net - 如何在 devexpress 弹出控件中将 xls 文件的数据上传到 SQL Server?
- sql - varchar 列中的会计期间名称
- c - 从 VB.net 调用 DLL 导致堆异常
- firebase - 如果我从不在 firebaseUI 回收器适配器上调用 stopListening() 会发生什么
- php - 在 Laravel eloquent 中应用左连接
- service-worker - 我可以使用服务人员预加载特定资产吗?
- jhipster - 无法升级到 jhipster 5.3.4
- python - 将 3 列中的字典值写入文件