使用 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 。