将数据从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),
          ),

但是它不起作用，因为结果是未来。

我该如何解决？

谢谢。

Answer 1

分配一个空列表[]进行下拉，直到提取饮料为止，提取后我们将分配饮料列表。饮料列表将在我们的将来完成后获取项目。您需要在方法的initState中调用此future，以便在打开页面时它获取饮料，然后将其分配到饮料列表。Dropdown将保持为空，直到获取饮料为止。（以防您在下拉菜单中显示进度指示器，直到在将来的构建器中获取饮料包装下拉菜单时都可以）