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

Question

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

 @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' 没有实例方法 'call'.

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

下面是数据库的截图。

这也是另一个错误

Answer 1

您可以使用 getString(''):

snapshot.data.documents[索引].get('Product Title')

Here 是关于它的文档

Answer 2

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

1. 这是图片

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

2. 这是正文

文本(snapshot.data.documents[索引].get('Product Title') ,

感谢@Joss Baron