Loading data from Firebase into a DropdownButton in Flutter - firebase

Question

I'm new in Flutter with Firebase and I'm trying to load some arrays stored in Firebase into a DropdownButton.
This piece of code works when a I call it from a button. It returns a list of drinks that I can print on the screen:
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;
}
But my problem is that I'd like to load this list into a DropdownButton, so the user could choose one of the drinks when the app shows him the form :
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),
),
But it doesn't work because the result is a Future.
How could I fix it?
Thanks.

Answer 1

Wrap it in a StreamBuilder. Instead of querying using _constantes.getDocuments() return the stream from _constantes.snapshots() assuming _constantes is your firebase collection:
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

Assign an empty list [] to dropdown until drinks are fetched and when fetched we will assign drinks list.Drinks list will get items after our future is completed.You need to call this future in initState of your method so when page is opened it fetches drinks and then assigns it to the drinks list.Dropdown will remain empty until drinks are fetched.
(Incase you want to show progressindicator on dropdown until drinks are fetched wrap dropdown in a future builder)
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

you can build drop down widget after you get data from your firebase and if you want to make show water before data is load or not data found then following solutions could be best for you.
in method comment part is for your case and un comment part is for demo.
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;
});
},
),
),
),
);
}
}