上传用户个人资料图片Firebase-Flutter

时间:2020-07-13 13:32:02

标签: firebase flutter dart firebase-storage

我正在使用ImagePicker选择个人资料图片,一旦选中图片,它将被分配给Circle Avatar,现在我该如何将图片上传到Firebase。如果用户刷新页面(UI),Circle Avatar将返回默认图像!我需要用currentUser的图片替换Circle Avatar

简而言之,我不知道如何从Firebase检索图像并将其分配到Circle Avatar

这是我尝试更新圈子头像的方式-

 CircleAvatar(
                            radius: 30.0,
                            backgroundColor: Colors.white,
                            child: (_imageFile != null)
                                ? Container(
                                    decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      image: DecorationImage(
                                          image: FileImage(_imageFile),//Selected Image
                                          fit: BoxFit.fill),
                                    ),
                                  )
                                : Image.network(
                                    (photoUrl == null)
                                        ? 'https://www.materialui.co/materialIcons/image/add_a_photo_black_36x36.png'//Default Picture
                                        : photoUrl,
                                    fit: BoxFit.fill,
                                  ), //Replace with Image From DB

上传图片-

Future UpdatePic() async{
   String fileName = basename(_imageFile.path);
  StorageReference firebaseStorageRef =
      FirebaseStorage.instance.ref().child(fileName);
  StorageUploadTask uploadTask = firebaseStorageRef.putFile(_imageFile);
  StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
  showInSnackBar("Picture updated successfully.");
}

这会上传图片,但我不知道如何将其检索到该特定用户的个人资料的Circle Avatar中。

1 个答案:

答案 0 :(得分:0)

首先,您需要获取存储的照片的下载URL:

export const PaymentQuery =extendType({
  type :"Query",
  definition(t) {
    t.crud.purchase({filtering : true , pagination : true , ordering : true , })
  }
})

export const VehicleQuery = extendType({
  type : "Query",
  definition(t) {
    t.crud.vehicles({filtering : true , pagination : true , ordering : true , });
  }
})

然后,您可以使用下载URL将其存储在变量中,然后像使用Image.network(photoUrl)在代码中一样进行输出。