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

Answer 2

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

这就是我解决“Flutter: How to load Future data from firebase to GridView?”的方法：

注意事项：

drMenues 是对 Firebase 数据库的引用：

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

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

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

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

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

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