Как мгновенно отобразить на экране изображение, снятое с камеры

Question

В настоящее время я могу сохранять и извлекать изображения из firebase storage на экран, но проблема, с которой я сталкиваюсь, заключается в том, что, если я щелкаю изображение с камеры, оно не отображается сразу на экране (хотя это изображение сохраняется).Когда я возвращаюсь на другой экран и возвращаюсь, то отображается вновь сделанный снимок.Но я хочу, чтобы изображение, снятое с камеры, мгновенно появилось на экране.Одним из решений из этой публикации является использование 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 довольно круто и быстро).

Если вам интересно, отметьте эту статью среднего уровня и документы !

Вы можете найти пример создания приложения с Firebase Firestore и StreamBuilder здесь .