(Flutter Web) Firebase 存储不能与 firebase 插件一起使用

Question

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

我有时会遇到不同的 "red screen"-错误，但一切都与使用 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,
          );
        }
      },
    );
  }
}

Answer 1

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

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

然后你就可以放心的往里面添加剩下的方法了，比如； child() 然后 put() 或 putString()。祝你好运！！！

Answer 2

对于那些追随我的人，这里是为 Flutter Web 实现 Firebase 存储图像下载的摘要。

感谢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()),
          );
        },
      )

(Flutter Web) Firebase 存储不能与 firebase 插件一起使用

(Flutter Web) Firebase Storage not working with firebase plugin

dart

firebase

flutter

firebase-storage

flutter-web