（Flutter Web）Firebase 存储无法与 firebase 插件一起使用答案

【问题标题】：(Flutter Web) Firebase Storage not working with firebase plugin（Flutter Web）Firebase 存储无法与 firebase 插件一起使用
【发布时间】：2020-07-15 08:15:14
【问题描述】：

我最近为我的一个大量使用 Firebase 服务的项目添加了 Flutter Web 支持。一切似乎都正常，除了 Firebase Storage 不起作用。我知道 firebase_storage 插件目前不适用于 Web，所以我尝试使用常规的 firebase 插件，但我无法让它工作。

我有时会收到不同的“红屏”错误，但一切都与使用 Firebase 存储的页面有关。以下是红屏的一个示例：

这是我之前成功使用 firebase_storage 的 3 个文件（Android）以及我尝试使用 firebase 插件的代码。

import 'package:firebase/firebase.dart' as fb;

// artiklar/images
final fb.StorageReference fbRefArtiklarImages =
    fb.app().storage().ref().child("artiklar").child("images");

// guider/categoryImages
final fb.StorageReference fbRefGuiderCategoryImages =
    fb.app().storage().ref().child("guider").child("categoryImages");
// guider/guideImages
final fb.StorageReference fbRefGuiderGuideImages =
    fb.app().storage().ref().child("guider").child("guideImages");

// kalender/images
final fb.StorageReference fbRefKalenderImages =
    fb.app().storage().ref().child("kalender").child("images");

// sidor/sidloggor
final fb.StorageReference fbRefSidorSidloggorImages =
    fb.app().storage().ref().child("sidor").child("sidloggor");
// sidor/sidcovers
final fb.StorageReference fbRefSidorSidcoversImages =
    fb.app().storage().ref().child("sidor").child("sidcovers");
// sidor/postImages/:sidaID/
final fb.StorageReference fbRefSidorPostImagesImages =
    fb.app().storage().ref().child("sidor").child("postImages");
// sidor/postImages/:sidaID/
final fb.StorageReference fbRefSidorKalenderImagesImages =
    fb.app().storage().ref().child("sidor").child("kalenderImages");

import 'dart:io';
import 'package:firebase/firebase.dart' as fb;

class StorageService {
  //STORAGE REFERENCES
  final fb.Storage _storage = fb.app().storage("gs://astoria-site.appspot.com");

  //UPLOADS IMAGE TO FIREBASE
  fb.UploadTask _uploadTask;

  Future<void> uploadStorageImage(File imageFile, String filePath) async {
    _uploadTask = _storage.ref().child(filePath).put(imageFile);
    return;
  }

  //DELETES IMAGE IN FIREBASE
  Future<void> deleteStorageImage(String filePath) async {
    try {
      await _storage.ref().child(filePath).delete();
    } catch (e) {
      print(e.toString());
    }

    return;
  }
}

import 'package:astoria/theme/colors.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:firebase/firebase.dart';
import 'package:flutter/material.dart';

class FirebaseStorageImage extends StatelessWidget {
  final String fileName;
  final StorageReference storageLocation;

  FirebaseStorageImage({
    @required this.fileName,
    @required this.storageLocation,
  });

  Future<String> _getImageURL() async {
    final StorageReference ref = storageLocation.child(fileName + ".jpg");

    try {
      var url = await ref.getDownloadURL();
      return url.toString();
    } catch (e) {
      return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _getImageURL(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.hasData) {
          return Image(
            image: CachedNetworkImageProvider(snapshot.data),
            fit: BoxFit.cover,
          );
        } else if (snapshot.connectionState == ConnectionState.waiting) {
          //RETURN THIS WHILE WAITING FOR IMAGE
          return Container(color: lightGreyColor);
        } else {
          //RETURN THIS IF NO IMAGE WAS FOUND AT THAT LOCATION
          return Image(
            image: AssetImage("assets/images/placeholder.png"),
            fit: BoxFit.cover,
          );
        }
      },
    );
  }
}

【问题讨论】：

标签： firebase flutter dart firebase-storage flutter-web

【解决方案1】：

您需要将一个字符串传递给 ref 方法以使其工作。为方便起见，将ref 更改为refFromURL，然后将您的存储桶URL 作为字符串传递给它，如下所示；

fb.app().storage().refFromURL("YOUR BUCKET URL HERE eg: 'gs://project-ID.appspot.com'")

然后你就可以放心地把剩下的方法加进去了，比如； child() 然后是 put() 或 putString()。祝你好运！！！

【讨论】：

非常感谢，这成功了！我还使用了当前不适用于 Flutter Web 的包 cached_network_image，所以我也摆脱了它。希望这也可以帮助其他人。

【解决方案2】：

对于那些追随我的人，这里是实现 Flutter Web 的 Firebase Storage 图像下载的总结。

感谢Learn Flutter Code for this nice little tutorial.

不要让 Firebase 存储成为依赖项，只需使用 Firebase：

import 'package:firebase/firebase.dart' as fb;

然后创建一个方法：

        Future<Uri> myDownloadURL() async {return await fb.storage().refFromURL('gs://<your storage reference>').child('$id.jpg').getDownloadURL();}

像这样从 FutureBuilder 调用它：

        FutureBuilder<Uri>(
        future: myDownloadURL(),
        builder: (context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return <Something as a placeholder>;
          }
          return CircleAvatar(
            radius: backgroundRadius * 2,
            child: Image.network(snapshot.data.toString()),
          );
        },
      )

【讨论】：