如何从 Firebase Firestore 获取数据并将其存储在列表中以在颤振小部件中使用?

Posted

技术标签:

【中文标题】如何从 Firebase Firestore 获取数据并将其存储在列表中以在颤振小部件中使用?【英文标题】:How to fetch data from Firebase Firestore and store it in a List to use in flutter Widgets? 【发布时间】:2022-01-13 10:42:39 【问题描述】:

我正在开发一个需要从 Firestore 存储和读取数据的应用程序。目前我正在使用地图列表来生成小部件。我的清单是

List<Map> subjects = [
  "name": "WAK", "time": 13.30, "day": 'Mon',
  "name": "RAD", "time": 10.30, "day": 'Tue',
  "name": "PQR", "time": 15.15, "day": 'Fri'
];

从上面的列表中,我正在生成应用程序将使用列小部件显示的小部件。我的颤动屏幕如下所示:

现在,我想实现相同的目标,但我想从 firestore 获取数据而不是预定义列表。为此我编写了以下代码:

 FirebaseFirestore.instance
    .collection('classes')
    .get()
    .then((QuerySnapshot querySnapshot) 
  querySnapshot.docs.forEach((doc) 
    print(doc.data());
  );
);

从上面的代码中,我在终端中得到输出:

I/flutter ( 5012): subject: SE, fromTime: 1115, days: [Mon, Wed]
I/flutter ( 5012): subject: OSSS, fromTime: 1430, days: [Tue, Wed, Fri]

如您所见,每个文档的结构与我上面定义的地图几乎相同,但我不知道如何从中获取数据并将其存储在地图列表中,以便我可以以我之前生成的相同方式生成小部件。 另外,有没有更好或更有效的方法来从 Firestore 中获取数据并在我的小部件中使用它。

【问题讨论】:

【参考方案1】:

使用FutureBuilder:

FutureBuilder<QuerySnapshot>(
  future: FirebaseFirestore.instance.collection('classes').get(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) 
    if (snapshot.hasData) 
      return Column(
        children: snapshot.data?.docs?.map((doc) 
          // your widget here(use doc data)
          return YourWidget();
        )?.toList() ?? [],
      );
     else 
      // or your loading widget here
      return Container();
    
  ,
);

希望你能明白 :)

【讨论】:

明白了。谢谢。

以上是关于如何从 Firebase Firestore 获取数据并将其存储在列表中以在颤振小部件中使用?的主要内容,如果未能解决你的问题,请参考以下文章

如何按文档 ID 从 Firebase Firestore 获取数据 - iOS?

如何从firebase存储中获取图片,图片的网址在firestore中。

如何使用具有 Null 安全性的 FlutterFire Firestore 和 Flutter 2.0 从 Firebase 获取数据

Flutter For Web 从 Firestore 获取数据

如何从 Firebase Firestore 获取数据并将其存储在列表中以在颤振小部件中使用?

渲染从 firebase firestore 获取的数组数据