Sid*_*rth 1 dart firebase flutter google-cloud-firestore stream-builder
GetPhotoUrlStream 提供存储在我的 Cloud Firebase FireStore 中的个人资料照片 (data['profilePhoto']) 的 Url 流。然后被网络图像用来显示个人资料照片(圆形头像)
class GetUserPhotoUrlStream extends StatelessWidget {
final String documentId; // This is your User UID
GetUserPhotoUrlStream(this.documentId);
@override
Widget build(BuildContext context) {
DocumentReference users = FirebaseFirestore.instance.collection('users').doc(documentId);
return StreamBuilder<DocumentSnapshot>(
stream: users.snapshots(),
builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.hasError) {
return Image.asset('assets/images/NouserImage.png');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
Map<String, dynamic> data = snapshot.data.data();
return CircleAvatar(
maxRadius: 80,
backgroundColor: Colors.grey,
child: ClipOval(child: FadeInImage(placeholder: AssetImage('assets/images/NouserImage.png'),image: NetworkImage("${data['profilePhoto']}"),),),
);
},
);
}
}
Run Code Online (Sandbox Code Playgroud)
removeUserPhotoUrl 将 GetUserPhotoUrlStream 正在使用的“profilePhoto”更新为 null。
Future<void> removeUserPhotoUrl(BuildContext context) async
{
var user = _auth.currentUser;
DocumentReference users = FirebaseFirestore.instance.collection('users').doc(user.uid);
users.update({'profilePhoto':null}).then((_){
Navigator.pop(context);
});
await deleteUserImage(context);
notifyListeners();
}
Run Code Online (Sandbox Code Playgroud)
当使用removeUserPhotoUrl将data['profilePhoto']的值设置为空时,它应该向我显示占位符图像,它提供了一个assetImage,而不是给出一个错误
错误信息
====================================================================================================
======== Exception caught by image resource service ================================================
Invalid argument(s): No host specified in URI file:///null
====================================================================================================
Run Code Online (Sandbox Code Playgroud)
另外,当应用程序热重新加载或热重新启动时,错误消失并开始向我显示占位符(资产图像)
请帮忙。我想在“profilePhoto”变为空后立即显示占位符(资产图像)
您首先需要了解FadeInImage Widget 的作用,
FadeInImage(
placeholder: AssetImage('assets/images/NouserImage.png'),
image: NetworkImage("${data['profilePhoto']}"),
),
Run Code Online (Sandbox Code Playgroud)
简而言之,它的作用是显示您作为小部件提供的占位符,以显示实际网络图像何时从 URL 加载,然后在 URL 获得图像形式的响应后,它以小部件而不是占位符的形式向我们显示。
这就是为什么当您热重启或热重新加载应用程序时,整个 UI 以及 FadeInImage 小部件都会被重建。
问题是什么:
======== Exception caught by image resource service ================================================
Invalid argument(s): No host specified in URI file:///null
====================================================================================================
Run Code Online (Sandbox Code Playgroud)
上面的消息表明没有指定主机。这意味着您获取的数据或 URLdata['profilePhoto']返回一个没有指定http://或的 URL https://。
解决方案
您需要确保您在data['profilePhoto'].
不过,如果您想确保在 URL 失败时显示您的小部件,您应该使用imageErrorBuilderFadeInImage 中的属性,如下所示:
FadeInImage(
placeholder: placeholder,
image: image,
imageErrorBuilder: (ctx, exception, stackTrace) {
return Container(); //THE WIDGET YOU WANT TO SHOW IF URL NOT RETURN IMAGE
},
)
Run Code Online (Sandbox Code Playgroud)
我希望你明白我的意思。
| 归档时间: |
|
| 查看次数: |
2306 次 |
| 最近记录: |