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

Question

我是Flutter和Firebase的新手，我正在尝试将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

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

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

Answer 2

将一个空列表[]分配给下拉列表，直到提取饮料，提取时我们将分配饮料列表。饮料清单将在我们的未来完成后获得项目。您需要在方法的initState中调用这个future，这样当页面打开时，它会获取饮料，然后将其分配给饮料列表。在取到饮料之前，滴漏液将一直是空的。(如果你想在下拉列表中显示进度指示器，直到饮料被提取出来，在未来的构建器中包装下拉列表(

List<String> drinks = List();
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());
}
setState(() {
drinks = res;
});
return res;
}
DropdownButtonFormField(
hint: Text('Choose a drink'),
value: _currentDrink ?? 'Water',
items: drinks == null? []: drinks.map((drink) {
return DropdownMenuItem<String>(
child: Text(drink),
value: drink,
);
}).toList(),
onChanged: (val) => setState(() => _currentDrink = val),
),

Answer 3

您可以在从firebase获取数据后构建下拉窗口小部件，如果您想在加载数据或找不到数据之前进行演示，那么以下解决方案可能最适合您。

方法中的注释部分用于您的案例，而取消注释部分用于演示。

class DeleteWidget extends StatefulWidget {
const DeleteWidget({Key key}) : super(key: key);
@override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
String initdata = 'water';
List<String> _getdata = List();
@override
void initState() {
super.initState();
getdatafromAPI();
}
void getdatafromAPI() async {
/*
_db.drinks.then((drinks){
setState((){
_getdata.addAll(drinks);
initdata = _getdata[0];
});
});
*/
await Future.delayed(Duration(seconds: 1));
setState(() {
_getdata.addAll(['coffee', 'tea', 'greentea']);
initdata = _getdata[0];
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('test app'),
),
body: Container(
child: Center(
child: DropdownButton(
items: _getdata.length > 0
? _getdata.map((e) {
return DropdownMenuItem<String>(
child: Text(e.toString()),
value: e.toString(),
);
}).toList()
: [
DropdownMenuItem<String>(
child: Text("water"),
value: 'water',
)
],
value: initdata,
onChanged: (value) {
setState(() {
initdata = value;
});
},
),
),
),
);
}
}