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

Question

目前我可以将 firebase storage 中的图像保存并检索到屏幕上，但我面临的问题是，如果我单击来自相机的图片，它不会立即显示在屏幕上（尽管该图像已保存）。当我回到其他屏幕并返回时，会显示新拍摄的照片。但我想立即在屏幕上显示从相机拍摄的图像。 post 的解决方案之一是使用 Image.file 显示本地图片，使用 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 returns 一个没有被任何东西使用的字符串，或者至少这是我通过阅读你的代码得到的。

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

String resultString = await uploadFile(imageFile);

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

如果我理解了您要执行的操作以及您的代码，这应该会有所帮助。

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

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

如果您有兴趣，请查看 this medium article and the docs！

您可以找到使用 Firebase Firestore 和 StreamBuilder here.

构建应用程序的示例

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

How to display image on screen taken from camera instantly?

firebase

flutter

firebase-storage

flutter-layout