使用 Flutter 和 Firebase 列出集合中的数据

Question

我刚刚学习 Flutter，我正在尝试制作一个理发师预约系统。 我被困在理发店的面板上。 现在，我的目标是将如下数据写入我绘制的正方形中，并使用 gridview 制作一个系统，该系统将更新约会数据，因为它会在每次约会到来时实时收听数据库。 总结一下，如果有新的数据输入数据库，底部会出现一个新的方块，显示数据。

我想要做

但是在编写代码时，我不断收到此错误。

错误 1

错误 2

这是我的代码：

 final Stream<QuerySnapshot> dateRef =
      FirebaseFirestore.instance.collection('date').snapshots();



StreamBuilder<QuerySnapshot>(
              stream: dateRef,
              builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return Text('Bir şeyler ters gitti');
                }
                return ListView(
                  children:
                      snapshot.data!.docs.map((DocumentSnapshot document) { <---- error is here
                    Map<String, dynamic> data =
                        document.data()! as Map<String, dynamic>;
                    return ListTile(
                      title: Text(data['Ad']),
                      subtitle: Text(data['Soyad']),
                    );
                  }).toList(),
                );
              },
            ),

• Kod Planet我在看他频道的视频之前尝试调用数据，我得到了上面的错误。

• dbestech我通过观看他频道上的视频更改了代码，它再次不起作用，我不断在同一个地方遇到同样的错误。

• 云Firestore | FlutterFire我尝试了文档中实时更改标头中的代码，它仍然没有用。

Answer 1

您的StreamBuilder的构建器有两个用于显示和访问的小部件选项，一个是您要显示响应的ListView ，另一个是错误Text ，对吗？

当StreamBuilder被放入小部件树时， dateRef流将被第一次调用，并且没有错误，因为它没有得到第一个响应，但在此之前需要显示一些东西，所以ListView被调用被渲染，此时，没有快照存在，所以snapshot.data是null 。

你需要简单地设置一些东西来显示，直到得到第一个响应，这个的常见用途是CircularProgressIndicator小部件：

StreamBuilder<QuerySnapshot>(
              stream: dateRef,
              builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return Text('Bir şeyler ters gitti');
                }
               if(snapshot.connectionState == ConnnectinState.waiting) { // add this
                 return Center(child: CircularProgressIndicator ());
                }
                return ListView(
                  children:
                      snapshot.data!.docs.map((DocumentSnapshot document) { 
                    Map<String, dynamic> data =
                        document.data()! as Map<String, dynamic>;
                    return ListTile(
                      title: Text(data['Ad']),
                      subtitle: Text(data['Soyad']),
                    );
                  }).toList(),
                );
              },
            ),

现在将显示一个加载指示器，直到它收到来自 Firebase 的第一个响应，然后它将按您的预期显示ListView 。