gridview - Flutter:如何将 Future 数据从 firebase 加载到 GridView？

Question

大家好(喜欢 Flutter 的人)，

这很简单(但我不知道怎么做)。

我在 Firebase 数据库中有动态菜单选项。我需要在 GridView 中向最终用户展示它。

我有一个 Future 列表(假设是 Future>)，它从 Firebase 数据中返回一个列表:

static Future<List<Menu>> list() async {
    List<Menu> _list = new List();
    await drMenues.onValue.listen((event) {
      Menu _menu = new Menu();
      _menu.desdeData(event.snapshot);
      _list.add(_menu);
    });
    return _list;
  }

现在，我需要用这些菜单选项填充我的 GridView。

final datosMenues = list();
...
new GridView.count(
  crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,
  childAspectRatio: (orientation == Orientation.portrait) ? 1.0 : 1.3,
      children: datosMenues.then
...

我需要一点帮助来完成它。我知道我需要一个“then”，因为它是一个 Future 列表。

请给点建议？

Answer 1

如果您需要更多帮助，这里有一个完整的示例。

这就是我的数据在 Firebase 中的组织方式:

return StreamBuilder(
    stream: FirebaseDatabase.instance
        .reference()
        .child("Communities")
        .onValue,
    builder: (BuildContext context, AsyncSnapshot<Event> snapshot) {
      if (snapshot.hasData) {
        Map<dynamic, dynamic> map = snapshot.data.snapshot.value;
        map.forEach((dynamic, v) => print(v["pic"]));

        return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3),
          itemCount: map.values.toList().length,
          padding: EdgeInsets.all(2.0),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: Image.network(
                map.values.toList()[index]["pic"],
                fit: BoxFit.cover,
              ),
              padding: EdgeInsets.all(2.0),
            );
          },
        );
      } else {
        return CircularProgressIndicator();
      }
    });

void initState() {
  final FirebaseDatabase database = FirebaseDatabase(app: widget.app);
  database.setPersistenceEnabled(true);
  database.setPersistenceCacheSizeBytes(10000000);
  super.initState();
}