Question

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

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

String resultString = await uploadFile(imageFile);

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

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

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

顺便说一句，我建议您看一下StreamBuilder，它可以让您根据数据流来构建（和重建）窗口小部件（您正在使用Firebase，我可以凭经验告诉您，Firebase与StreamBuilder的组合非常棒且快速）。

如果您有兴趣，请选中this medium article和the docs！

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

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

1 个答案: