有什么更好的方法可以知道Image.network是否已加载并使用Riverpod将其存储在状态中

Question

我只想问一下，是否有更好的方法可以知道图像是否成功加载，然后使用Riverpod将其置于布尔状态？

现在我有这样的代码：

final validPhotoProvider = StateProvider<bool>((ref) => false);
Image.network(
photoUrl, 
loadingBuilder: (context, child, loadingProgress){
if(loadingProgress == null){ //means image has finished loading.
ref.read(validPhotoProvider).state = true;
return child;
}
return CircularProgressIndicator();
},
),

正如你所看到的，我依赖构建器来知道图像是否已加载。有没有更好的方法可以做到这一点，因为我知道这种方法不好，因为它最终可能会导致糟糕的状态。

Answer 1

所以当我发现这个问题时，我解决了这个问题。

我所做的就是把代码改成这样：

final validPhotoProvider = StateProvider<bool>((ref) => false);
Widget build(context, ref){
Image? image;
if (photoUrl != null) {
image = Image.network(
photoUrl,
);
image.image
.resolve(const ImageConfiguration())
.addListener(ImageStreamListener((info, call) {
if (mounted) {
ref.read(validPhotoProvider).state = true;
}
}));
}
return Image.network(
photoUrl, 
);
...
}

实际上，您要做的是向图像流中添加一个侦听器。作为Flutter的新手，这对我来说是一门新知识，我希望这能帮助那些可能遇到同样问题的人。