firebase - 将数据从 Firebase 加载到 Flutter 中的 DropdownButton 中

Question

我是使用 Firebase 的 Flutter 新手，我正在尝试将 Firebase 中存储的一些数组加载到 DropdownButton 中。

当我从按钮调用这段代码时，它会起作用。它返回我可以在屏幕上打印的饮料列表:

Future<List<String>> get drinks async {
    QuerySnapshot docs = await _constantes.getDocuments();
    List<String> res = List();
    List<Map<String, dynamic>> datos = List();

    for (var d in docs.documents) {
      datos.add(d.data);
    }

    for (var d in datos[0]['drinks'].toList()) {
      res.add(d.toString());
    }

    return res;
  }

但我的问题是，我想将此列表加载到 DropdownButton 中，以便用户在应用程序向他显示表单时可以选择其中一种饮料:

DropdownButtonFormField(
            hint: Text('Choose a drink'),
            value: _currentDrink ?? 'Water',
            items: _db.drinks.then((drinks) {
              List<DropdownMenuItem> datos = List();

              for (var d in drinks) {
                datos.add(DropdownMenuItem(
                  value: d,
                  child: Text(d),
                ));
              }
              return datos;
            }),
            onChanged: (val) => setState(() => _currentDrink = val),
          ),

但是它不起作用，因为结果是一个 Future。

我该如何解决这个问题？

谢谢。

Answer 1

将其包装在StreamBuilder中。假设 _constantes 是您的 Firebase 集合，而不是使用 _constantes.getDocuments() 进行查询，而是从 _constantes.snapshots() 返回流:

StreamBuilder<List<DocumentSnapshot>>(
  stream: _drinkStream,
  builder: (context, snapshot) {
    return snapshot.hasData
        ? DropdownButton(
            onChanged: (value) {},
            items: [
              for (var child in snapshot.data)
                DropdownMenuItem(
                  child: Text(
                    child.data['name'],
                  ),
                  value: child,
                ),
            ],
          )
        : Container();
  },
)