Блог

Как статически отображать изображение, загруженное из хранилища firebase, всегда в приложении flutter, его можно открыть и просмотреть одним щелчком мыши.

Я уже загрузил изображение с камеры и галереи в хранилище firebase. Теперь я хочу загрузить изображение из хранилища firebase и обеспечить, чтобы загруженные изображения легко оставались в приложении, не исчезая.

Я имею в виду, что когда пользователь посещает экран приложения flutter, загруженное изображение или изображения должны отображаться.

Загруженное изображение с помощью хранилища firebase:

    final FirebaseStorage _storage =
  FirebaseStorage(storageBucket: 'gs://flutter-imageupload-cb66a.appspot.com');
      StorageUploadTask _uploadTask;
      _startUpload() async {
    String imagePath = 'DeviceImages/DeviceImage${DateTime.now()}.png';
    final StorageReference storageReference = FirebaseStorage().ref().child(imagePath);
    final StorageUploadTask uploadTask = storageReference.putFile(imageFile1);
    await uploadTask.onComplete;
    _addPathToDatabase(imagePath);
       print("Image uploaded");
    setState(() {
      _uploadTask =
          _storage.ref().child(imagePath).putFile(imageFile1);
    });
  }
 

используется firebase_storage: ^3.1.6 и firebase_database:

используется image_picker: ^0.6.7 17 для выбора изображения с камеры и галереи.

Чтобы загрузить изображение из хранилища firebase, попробуйте выполнить следующие действия:

 final StorageReference storageReference = FirebaseStorage().ref().child(imagePath);
final UploadTask uploadTask = storageReference.putFile(imageFile1);
uploadTask.then((res) {
   res.ref.getDownloadURL();
});
 

UploadTask расширяет Future класс, поэтому вы можете использовать then() , который регистрирует обратный вызов, который будет вызван после того, как future вернет результат. Затем вы сможете получить url изображение, используя этот метод getDownloadUrl() .

После того, как у вас есть url , вы можете использовать CachedNetworkImage класс и выполнить следующие действия:

 CachedNetworkImage(
  imageUrl: imgUrl,
);
 

Сначала вам необходимо загрузить пакет:

https://pub.dev/packages/cached_network_image

Ознакомьтесь с приведенным здесь руководством о том, как отображать изображения из Интернета:

https://flutter.dev/docs/cookbook/images/network-image

https://flutter.dev/docs/cookbook/images/cached-images