如何列出 Flutter Firestore 中文檔的值？

Question

我有一個 Firebase Firestore 構建如下：

我想從集合中的所有文檔中提取標題值，並使用ListTile顯示此傳入數據。

我能夠使用我編寫的代碼訪問所有title值：

FirebaseFirestore.instance.collection(user.uid).get().then((value) {
  value.docs.forEach((element) {
    print(element.data()["title"]);
  });
});

但我不知道如何將傳入值轉儲到ListTile 。 如何將這些傳入的標題值轉儲到ListTile ？

Answer 1

如果您不使用任何 state 管理解決方案（Riverpod、Provider、Bloc 等），您可以只使用FutureBuilder ，或者如果您想獲取實時數據 Stream，您可以像這樣使用StreamBuilder

Streambuilder 示例：

StreamBuilder<QuerySnapshot<Map<String, dynamic>>>( // inside the <> you enter the type of your stream
      stream: FirebaseFirestore.instance.collection(user.uid).snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(
                  snapshot.data!.docs[index].get('title'),
                ),
              );
            },
          );
        }
        if (snapshot.hasError) {
          return const Text('Error');
        } else {
          return const CircularProgressIndicator();
        }
      },
    );

我建議您使用數據類而不是data.docs.get('xxx') 。

例如：

class MyDataClass {
  final String title;
  final String content;

  MyDataClass({
    required this.title,
    required this.content,
  });

  Map<String, dynamic> toMap() {
    final result = <String, dynamic>{};
  
    result.addAll({'title': title});
    result.addAll({'content': content});
  
    return result;
  }

  factory MyDataClass.fromMap(Map<String, dynamic> map) {
    return MyDataClass(
      title: map['title'] ?? '',
      content: map['content'] ?? '',
    );
  }

  String toJson() => json.encode(toMap());

  factory MyDataClass.fromJson(String source) => MyDataClass.fromMap(json.decode(source));
}

要生成 toJson/fromJson 或 toMap/fromMap 函數，您可以在 VSCode 或各種網站中使用 Dart 數據 class 生成擴展。

現在您可以像這樣顯示數據：

if (snapshot.hasData) {
          final List<MyDataClass> myList = snapshot.data!.docs
              .map(
                (doc) => MyDataClass.fromMap(doc.data()),
              )
              .toList();
          return ListView.builder(
            itemCount: myList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(
                  myList[index].title,
                ),
              );
            },
          );
        }