Как загрузить изображение в хранилище Firebase и сохранить URL-адрес изображения в базе данных Firebase, чтобы использовать его во флаттере

Question

Мне нужно получить ссылку на изображение из хранилища Firebase и сохранить его URL в поле Firestore. У меня есть коллекция с полем с именем avatar (строка), значение аватара является ссылкой на изображения из хранилища Firebase

---

  ClipRRect(
                                      child: Image.network(snapshot.data[index].data['avatar'],
                                        height: 100,
                                        width: 170,
                                        fit: BoxFit.fill,
                                      ),
                                      borderRadius: BorderRadius.circular(20),
                                    ),

---

и код ошибки

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following ArgumentError was thrown resolving an image codec:
Invalid argument(s): Unsupported scheme 'gs' in URI gs://pfe-2020-51d9c.appspot.com/Ail/14118b537d_100727_bienfaits-ail.jpg

When the exception was thrown, this was the stack: 
#0      _HttpClient._openUrl (dart:_http/http_impl.dart:2278:9)
#1      _HttpClient.getUrl (dart:_http/http_impl.dart:2197:48)
#2      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:84:59)
#3      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:47:14)
#4      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
...
Image provider: NetworkImage("gs://pfe-2020-51d9c.appspot.com/Ail/14118b537d_100727_bienfaits-ail.jpg", scale: 1.0)
Image key: NetworkImage("gs://pfe-2020-51d9c.appspot.com/Ail/14118b537d_100727_bienfaits-ail.jpg", scale: 1.0)

═════════════════════════ ══════════════════════════════════════════════════ ═════

Answer 1

1) Создать переменную файла для хранения вашего изображения:

Вы можете использовать image_picker , чтобы выбрать изображение из телефона.

File file;

2) Создать функцию для выбора изображения

handleChooseImageFromGallery() async {
File _file = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
  this.file = _file;
});
}

Вы можете передать ImageSource.camera в источник если вы хотите сделать изображение с помощью камеры телефона.

3) Загрузка изображения в хранилище Firebase

Future<String> handleUploadImage(imageFile) async {
// Upload imageFile to firebase storage
// TODO: use uuid for pictureId

StorageUploadTask uploadTask =
    storageRef.child("${user.id}_profilePic_$picId.jpg").putFile(imageFile);
StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;
// Once the image is uploaded to firebase get the download link.
String downlaodUrl = await storageTaskSnapshot.ref.getDownloadURL();
return downlaodUrl;
}

Это Функция вернет URL изображения.

4) Сохранение URL изображения в документе Firestore

void handleUpdateUserProfile()
{
    String mediaUrl = await handleUploadImage(file); // Pass your file variable 
    // Create/Update firesotre document
    usersRef.document(userId).updateData(
    {
        "avatar": mediaUrl,
    }
    );
}