How to get async value in Flutter - flutter

Question

I have this function that retrieves data from firestore and returns a list. I and call this function from another function.
the function that retrieves data and returns the list:
Future<List> getNewsOnSearchBar() async{
final String _collection = 'news';
final Firestore _fireStore = Firestore.instance;
var newsList = [];
print("1");
Future<QuerySnapshot> getData() async {
print("2");
return await _fireStore.collection(_collection).getDocuments();
}
QuerySnapshot val = await getData();
if (val.documents.length > 0) {
print("3");
for (int i = 0; i < val.documents.length; i++) {
newsList.add(val.documents[i].data["headline"]);
}
} else {
print("Not Found");
}
print("4");
return newsList.toList();
}
And I am calling this getNewsOnSearchBar() function from another function that returns a Widget as below:
Widget _showSearchBar(BuildContext context) {
var list = [];
getNewsOnSearchBar().then((value){
print(value); //this will print successfully
list = value; //but this assign doesn't work
});
print(list); //prints an empty list
return GFSearchBar(
// overlaySearchListHeight: 160.0,
searchList: list, //empty
searchQueryBuilder: (query, list) {
return list
.where((item) => item.toLowerCase().contains(query.toLowerCase()))
.toList();
},
overlaySearchListItemBuilder: (item) {
return Container(
padding: const EdgeInsets.all(3),
child: Text(
item,
style: const TextStyle(fontSize: 18),
),
);
},
onItemSelected: (item) {},
);
}
Can someone help me, please?

Answer 1

You are using Future in a wrong way, when you are building a widget that depends on a value from a Future, you need to use FutureBuilder,
So for example your _showSearchBar method -which,I assume, you are calling inside build to show something on the screen- will become:
Widget _showSearchBar(BuildContext context) {
return FutureBuilder(
future: getNewsOnSearchBar(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
if (snapshot.data != null) {
return GFSearchBar(
// overlaySearchListHeight: 160.0,
searchList: list, //empty
searchQueryBuilder: (query, list) {
return list
.where((item) => item.toLowerCase().contains(query.toLowerCase()))
.toList();
},
overlaySearchListItemBuilder: (item) {
return Container(
padding: const EdgeInsets.all(3),
child: Text(
item,
style: const TextStyle(fontSize: 18),
),
);
},
onItemSelected: (item) {},
);
} else {
return CircularProgressIndicator();
}
}
}
);
}
Learn more about Futures and async/await here:
https://www.youtube.com/watch?v=OTS-ap9_aXc
https://www.youtube.com/watch?v=SmTCmDMi4BY
https://www.youtube.com/watch?v=ek8ZPdWj4Qo