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

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

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

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

Загрузил изображение, используя хранилище 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. Для хранения изображений я бы рекомендовал использовать пакет CachedNetworkImage. Он будет кэшировать изображение и хранить изображения локально в течение 30 дней. Если вы хотите хранить изображения постоянно, вам придется сохранять изображения непосредственно в каталоге приложения.

CoderUni 18.12.2020 08:07
Интеграция Angular - Firebase Analytics
Интеграция Angular - Firebase Analytics
Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.
0
1
358
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

UploadTask расширяет класс Future, поэтому вы можете использовать then(), который регистрирует обратный вызов, который будет вызываться после того, как будущее вернет результат. Тогда вы сможете получить 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

Я попытался использовать ваш код. Теперь я вижу следующие ошибки. Метод «тогда» не определен для типа «StorageUploadTask». Попробуйте исправить имя на имя существующего метода или определить метод с именем «тогда». Открытая документация и неопределенное имя «imgUrl».

srk2k14 18.12.2020 12:11

проверьте мое редактирование. Что касается imgUrl, это переменная, которую вы должны создать, вам нужно сохранить res.ref.getDownloadURL(); внутри этой переменной.

Peter Haddad 18.12.2020 12:12

Мой новый код выглядит следующим образом: final StorageReference storageReferencFirebaseStorage().ref().child(imagePath); final StorageUploadTask uploadTask = storageReference.putFile(_imageFile1); uploadTask.then((res) { res.ref.getDownloadURL(); }); //Image.file(File(widget.imagePath); setState(() { _uploadTask = _storage.ref().child(imagePath).putFile(_imageFile1); }); CachedNetworkImage(imageUrl: imgUrl,); }

srk2k14 18.12.2020 12:13

проверьте мое редактирование. Что касается imgUrl, это переменная, которую вы должны создать, вам нужно сохранить res.ref.getDownloadURL(); внутри этой переменной.

Peter Haddad 18.12.2020 12:13

Хорошо, а как насчет "Метод "тогда" не определен для типа "StorageUploadTask"".

srk2k14 18.12.2020 12:15

проверьте редактирование в ответе, я меняю тип с StorageUploadTask на UploadTask

Peter Haddad 18.12.2020 12:16

обновить firebase_storage до последней версии

Peter Haddad 18.12.2020 12:16

хорошо, я сообщу вам после обновления до последней версии

srk2k14 18.12.2020 12:18

Теперь мои зависимости - это firebase_storage: ^ 5.2.0 firebase_core: ^ 0.5.3, а новые показанные ошибки - это класс Undefined «StorageUploadTask». и неопределенный класс StorageReference.

srk2k14 18.12.2020 12:25
stackoverflow.com/questions/64764111/…
Peter Haddad 18.12.2020 12:28

Хорошо, все ошибки исправлены, я запускаю приложение и проверяю, кэшируются ли изображения или нет. Спасибо

srk2k14 18.12.2020 12:41

В моем приложении я использовал firestore_service.dart с использованием зависимости cloud_firestore: в другом модуле отображается ошибка Stream<List<Entry>> getEntries(){ return _db.collection('entries').snapshots().map((snapshot) => snapshot.docs.map((doc) => Entry.fromJson(doc)).toList()); } Тип аргумента «Map<String, dynamic> Function()» не может быть присвоен типу параметра «Map<String,

srk2k14 18.12.2020 12:58

После обновления версий зависимостей и внесения изменений в код Мой виджет приложения или экран, показывающий баланс белого экрана, я не знаю, почему?

srk2k14 18.12.2020 13:14

Теперь я изменился на окончательный StorageReference ref = FirebaseStorage().ref().child imagePath); final StorageUploadTask uploadTask2 = ref.putFile (_imageFile1); конечная ссылка = await ref.getDownloadURL(); await Clipboard.setData(ClipboardData(текст: ссылка,)); ); setState(() { _uploadTask2 = _storage2.ref().child(imagePath).putFile(_imageFile2); }); вар имгурл; Кэшированное изображение сети (URL-адрес изображения: URL-адрес img,); }

srk2k14 18.12.2020 15:19

наконец, я использовал приведенный выше код, но мое изображение не отображается в приложении статично. Пожалуйста, исправьте мою проблему.

srk2k14 19.12.2020 06:10

Мне так и не удалось поймать imageUrls и показать статические изображения. Пожалуйста помоги

srk2k14 19.12.2020 12:02

В моем приложении требуется всего 3 изображения и два PDF-файла для загрузки в хранилище firebase, а затем снова загрузка обратно в приложение флаттера. Теперь я хочу создать свое приложение таким образом, чтобы пользователь мог открывать каждую страницу формы и просматривать или открывать изображения и PDF-файлы на самой странице формы. Следовательно, я хочу использовать кеширование изображенийUrls и PDFUrls. Поэтому, пожалуйста, помогите мне решить эту проблему.

srk2k14 22.12.2020 06:34

Я уже успешно загрузил все из них и могу загрузить или просмотреть, кроме файла PDF. Я получил все загруженные URL-адреса для всех из них.

srk2k14 22.12.2020 06:38

Пожалуйста, исправьте мою проблему, я хочу установить изображения и PDF-файлы в приложении на постоянной основе до удаления.

srk2k14 29.12.2020 09:54

если вы сохраните изображения и PDF-файлы в хранилище Firebase, как это делается в этом ответе, вы всегда будете видеть их в своем приложении.

Peter Haddad 29.12.2020 10:00

Да, я прекрасно их вижу, поскольку использую image_picker и file_picker и устанавливаю для них изображение или файл. Но моя проблема заключается в том, что я хочу постоянно устанавливать изображения в приложении, чтобы при открытии одной и той же страницы формы текст, изображения и pdf-файлы должны были быть видны или включены для кликов и открытия

srk2k14 29.12.2020 10:23

Вы не сохраняете их в хранилище Firebase, все, что вам нужно сделать, это получить их оттуда. Они постоянно находятся в хранилище, поэтому просто извлеките их, это не имеет ничего общего с image_picker или file_picker.

Peter Haddad 29.12.2020 10:24

Мое приложение состоит из представления сетки с изображениями, каждое изображение при нажатии приводит к странице формы для отправки пользователем текстовых данных, изображений, загрузки PDF-файлов и т. д. Когда пользователь однажды отправляет все данные, данные сохраняются в firebase. Опять же, когда пользователь открывает ту же страницу формы во второй раз, все сохраненные текстовые данные должны отображаться, изображения и PDF-файлы должны быть нажаты и открыты.

srk2k14 29.12.2020 10:31

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

srk2k14 29.12.2020 21:05

Пожалуйста, задайте другой вопрос и объясните, что вы хотите

Peter Haddad 29.12.2020 21:12

Я хочу загрузить изображения, текстовые данные и PDF-файлы в базу данных и хранилище firebase и получить их все. Пожалуйста, направляйте.

srk2k14 29.12.2020 22:44

Пользователь вводит текстовые данные, загружает изображения, загружает PDF-файлы и отправляет форму. после отправки пользователь должен иметь возможность получить все данные на другой странице/экране.

srk2k14 29.12.2020 22:47

Питер Хаддад, я обновил скриншот для вашего понимания. Пожалуйста, исправьте мою проблему.

srk2k14 31.12.2020 06:54

Питер Хаддад, я обновил скриншот для вашего понимания. Пожалуйста, исправьте мою проблему

srk2k14 02.01.2021 11:35

Пожалуйста, кто-нибудь исправьте мою проблему. Я четко предоставил свой скриншот или идею приложения. По крайней мере, помогите мне получить PDF с помощью URL-адреса PDF. Я уже получил загруженный URL-адрес PDF.

srk2k14 04.01.2021 07:04

Другие вопросы по теме