颤振开发。通过 Stream Builder 从 Firebase Storage 和 Firestore 获取数据

Posted 2023-02-23

【中文标题】颤振开发。通过 Stream Builder 从 Firebase Storage 和 Firestore 获取数据

【英文标题】：Flutter Development. Getting data from Firebase Storage and Firestore through Stream Builder

【发布时间】：2021-10-15 14:23:34

【问题描述】：

我正在尝试从 Firestore 数据库和 Firestore 存储中获取数据。我正在从 Firestore 数据库集合中获取文本数据，但无法从 Firestore 存储中获取图像。它给出了例外。我应该使用下载 URL：要请求下载 URL，请在引用上调用 getDownloadURL 方法。谁能指导我在哪里以及如何使用它并获取图像。 https://firebase.flutter.dev/docs/storage/usage/#download-urls

以下是代码；

StreamBuilder<QuerySnapshot>(
    stream: db.collection('running').snapshots(),
    builder: (context, snapshot) 
      if (snapshot.hasData) 
        return StaggeredGridView.countBuilder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            itemCount: snapshot.data!.docs.length,
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 20.0,
            itemBuilder: (context, index) 
              DocumentSnapshot ds = snapshot.data!.docs[index];
              final shoes = Shoes.runningShoes[index];
              return Column(
                children: [
                  Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25.0),
                          color: Color(0xffF6F6F6)),
                      child: Column(
                        children: [
                          SizedBox(height: 60.0),
                          Image.network(
                            'https://firebasestorage.googleapis.com/v0/b/shoes-app-e2319.appspot.com/o/$ds['image']',
                            width:
                                MediaQuery.of(context).size.width,
                          ),
                          Align(
                              child: Padding(
                                padding: const EdgeInsets.only(
                                    right: 16.0),
                                child: Image.network(
                                  'https://firebasestorage.googleapis.com/v0/b/shoes-app-e2319.appspot.com/o/$ds['logo']',
                                  height: 60,
                                  width: 40,
                                  color: Color(0xffCBCBCB),
                                ),
                              ),
                              alignment: Alignment.bottomRight),
                        ],
                      )),
                  Padding(
                    padding: const EdgeInsets.only(top: 20.0),
                    child: Row(
                      mainAxisAlignment:
                          MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '\$$ds['price']',
                          textScaleFactor: 1.5,
                          style: TextStyle(
                              fontWeight: FontWeight.w500),
                        ),
                        FavoriteButton(valueChanged: () )
                      ],
                    ),
                  ),
                  Flexible(
                      child: Padding(
                    padding: const EdgeInsets.only(top: 10.0),
                    child: Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        ds['name'],
                        style: TextStyle(fontSize: 18.0),
                      ),
                    ),
                  ))
                ],
              );
            ,
            staggeredTileBuilder: (index) 
              return StaggeredTile.count(
                  1, index.isEven ? 2.1 : 2.2);
            );
       else if (snapshot.hasError) 
        return CircularProgressIndicator();
       else 
        return CircularProgressIndicator();
      
    ,
  )

【参考方案1】：

默认情况下，https://firebasestorage.googleapis.com/v0/b/shoes-app-e2319.appspot.com/o/$ds['logo'] 等 URL 不是公开可读的，因此 Image.network(..) 不一定能读取它们（它对 Firebase/Cloud Storage 一无所知）。

你有几个选择：

将存储桶标记为公开可读。

这样做非常快（请参阅文档here），但确实意味着每个人都可以访问该存储桶中的任何文件。

使用 Firebase SDK 读取图像的数据。

您可以使用 Firebase SDK 从文件中获取get the data，然后根据该数据构建图像。

另见：Retrieve Firebase storage image without getting downloadurl flutter

使用下载网址。

来自 Firebase 存储的下载 URL 看起来与您的 URL 相似，但添加了一个无法猜测的令牌。然后，此 URL 允许对该文件进行公开的只读访问。这些 URL 最容易使用，因为任何 HTTP 库都可以处理它们，但这意味着您必须通过 Firebase SDK 生成下载 URL。

另见Downloading Files from firebase storage to flutter