Flutter:如何将来自firebase的Future数据加载到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
...

我需要一些帮助来完成它.我知道我需要一个"那么"因为是未来的名单.

请问任何建议？

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();
}

Answer 2

我一直在调查和学习，我需要的是一个FutureBuilder ，它在“ future: ”中获取查询并在“ builder: ”中构建GridView 。

这就是我解决“ Flutter：如何将 Future 数据从 firebase 加载到 GridView？ ”的方法：

笔记：

drMenues是对 Firebase 数据库的引用：

DatabaseReference drMenues = FirebaseDatabase.instance.reference().child(tMenues);

Menues只是静态常量和静态函数的容器。

Menu是我的 firebase 数据库中每个数据的类。

MenuItem是一个 StatefulWidget，它返回一个要在 GridView 中显示的 Widget。

new FutureBuilder<DataSnapshot>(
              future: Menues.drMenues.orderByChild(Menues.ORDEN).once(),
              builder:
                  (BuildContext context, AsyncSnapshot<DataSnapshot> snapshot) {
                if (!snapshot.hasData) return new Container();
                Map content = snapshot.data.value;
                List<Menu> lista = new List<Menu>();
                content.forEach((key, value) {
                  Menu _menu = new Menu();
                  _menu.fromValue(key, value);
                  lista.add(_menu);
                });
                lista.sort((a,b) => a.orden.compareTo(b.orden));
                return new GridView.count(
                  crossAxisCount: 3,
                  childAspectRatio: 1.3,
                  children: lista.map((Menu menu) {
                    return new MenuItem(menu: menu);
                  }).toList(),
                );
              },
            ),

如果有人需要一点帮助，请告诉我。