从 Firestore 中检索数据并在 GridView.builder 中显示答案

【问题标题】：Retrieve data from Firestore and show in GridView.builder flutter从 Firestore 中检索数据并在 GridView.builder 中显示
【发布时间】：2020-09-30 16:24:59
【问题描述】：

我正在从 Firestore 中检索数据并将它们存储在 GridView.builder 中。数据包括图像和标题。我已经完成了这个问题和公开的解决方案 (GridView with Flutter and Firestore) 并遵循了很多视频教程但没有成功。

 @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: FirebaseFirestore.instance.collection("dB name").limit(12)
          .orderBy("Published Date", descending: true).snapshots(),
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if (!snapshot.hasData) {
          return spinkit;
        }
        return Expanded(
          child: Flex(
              direction: Axis.vertical,
              children: [
                GridView.builder(
                  physics: ScrollPhysics(),
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  itemCount: snapshot.data.docs.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: 10.0,
                    mainAxisSpacing: 10,
                  ),
                  itemBuilder: (BuildContext context, int index) {
                    return ClipRRect(
                      borderRadius: BorderRadius.circular(5),
                      child: Stack(
                        children: [
                          Container(
                            height: 150,
                            width: 150,
                            child: Image.network(snapshot.data()['thumbnail'],
                              fit: BoxFit.cover,
                              width: double.infinity,
                              height: double.infinity,
                            ),
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child: Container(
                              height: 20,
                              width: 150,
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    colors: [
                                      Colors.black38,
                                      Colors.black38,
                                    ],
                                    begin: Alignment.bottomCenter,
                                    end: Alignment.topCenter,
                                  )
                              ),
                            ),
                          ),
                          Positioned(
                            left: 4,
                            bottom: 5,
                            child: Text(snapshot.data().documents[index]['Product Title'],
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                  color: Palette.whiteColor,
                                  fontSize: 11,
                                  fontWeight: FontWeight.bold
                              ),),
                          )
                        ],
                      ),
                    );
                  },
                ),
              ]),
        );
      },

    );
  }

以下是收到的错误消息

引发了另一个异常：NoSuchMethodError: Class 'QuerySnapshot' has no instance method 'call'。

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
Class 'QuerySnapshot' has no instance method 'call'.
Receiver: Instance of 'QuerySnapshot'
Tried calling: call()
════════════════════════════════════════════════════════════════════════════════════════════════════

下面是数据库的截图。

这也是另一个错误

【问题讨论】：

标签： flutter dart gridview google-cloud-firestore

【解决方案1】：

你可以使用getString(''):

snapshot.data.documents[index].get('产品标题')

Here 是关于它的文档

【讨论】：

【解决方案2】：

这就是我根据文档Here解决这个问题的方法

这是图片

Image.network(snapshot.data.documents[index].get('thumbnail'),

这是正文

Text(snapshot.data.documents[index].get('Product Title') ,

感谢@Joss Baron

【讨论】：