firebase - 如何立即在屏幕上显示从相机拍摄的图像？

Question

目前我可以从 firebase storage 保存和检索图像到屏幕上，但我面临的问题是，如果我点击来自相机的图片，它不会立即显示在屏幕上(虽然该图像已保存)。当我回到其他屏幕并返回时，会显示新拍摄的照片。但我想立即在屏幕上显示从相机拍摄的图像。来自 this 的解决方案之一post是用Image.file显示本 map 片，用Image.network显示从firebase获取的图片，但我不知道怎么用这两个条件都可以实现我正在寻找的东西。下面的代码显示了从 firebase 下载的图像(在 ClipOval 小部件内)

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Edit Profile'),
          actions: <Widget>[
            new Center(child: new Text('SAVE')),
          ],
        ),
        body: new Stack(
          children: <Widget>[
            Positioned(
              width: 410.0,
              top: MediaQuery
                  .of(context)
                  .size
                  .height / 25,
              child: Column(children: <Widget>[
                Container(
                  child: user.profilePhoto == ""
                      ? Image.file(_imageFile,fit: BoxFit.cover,
                      height: 110.0,
                  width: 110.0,)
                      : ClipOval(
                    child: _imageUrl == null ? Image.asset('icons/default_profile_icon.png', height: 110.0,)
                    :Image.network(_imageUrl,fit: BoxFit.cover,
                    width: 110.0,
                    height: 110.0,)
                  ),
                ),

这就是我在点击来自相机的图片然后将其上传到 firebase 后尝试在屏幕上显示图像的方式:

//display image selected from camera
  imageSelectorCamera() async {
    Navigator.pop(context);
    var imageFile = await ImagePicker.pickImage(
      source: ImageSource.camera,
    );
    setState(() {
      _imageFile = imageFile;
    });

    uploadFile(imageFile);
  }

// Uploads image to firebase storage
  Future<String> uploadFile(imageFile) async {
    String fileName = 'images/profile_pics/' + this.firebaseUser.uid + ".jpeg";
    StorageReference reference = FirebaseStorage.instance.ref().child(fileName);
    StorageUploadTask uploadTask = reference.putFile(imageFile);

    var downloadUrl = await (await uploadTask.onComplete).ref.getDownloadURL();
    String url = downloadUrl.toString();
    return url;

  }

Answer 1

您的 uploadFile 返回一个未被任何东西使用的字符串，或者至少这是我通过阅读您的代码得到的结果。

假设 _imageUrl 是下载 URL 的状态变量，只是

String resultString = await uploadFile(imageFile);

setState((){
    _imageUrl = resultString;
});

如果我理解您要做什么和您的代码，这应该会有所帮助。

当您的 uploadFile 返回字符串并使用它重建小部件时，您应该触发状态更改。

顺便说一下，我建议你看看 StreamBuilder，它允许你根据数据流构建(和重建)小部件(你正在使用 Firebase，我可以根据经验告诉你，Firebase 和 StreamBuilder 非常棒而且速度很快。

感兴趣的可以查看this medium article和 the docs !

您可以找到使用 Firebase Firestore 和 StreamBuilder 构建应用程序的示例 here .