How to use flutter_typeahead with FirestoreFirebase to generate suggestions? - flutter

Question

class Header extends StatefulWidget {
#override
_HeaderState createState() => _HeaderState();
Future<List> getSearch() async {
List<String> searchList;
final List<DocumentSnapshot> documents =
(await FirebaseFirestore.instance.collection('movies').get()).docs;
searchList = documents
.map((documentSnapshot) => documentSnapshot['movieName'] as String)
.toList();
print(searchList); //This does print the data from the database.
return searchList;
}
}
The above code fetches data from FirebaseFirestore and also the print statement prints the list fetched.
class _HeaderState extends State<Header> {
final MenuController _controller = Get.put(MenuController());
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
color: kDarkBlackColor,
child: SafeArea(
child: Column(
children: [
Container(
padding: EdgeInsets.all(kDefaultPadding),
constraints: BoxConstraints(maxWidth: kMaxWidth),
child: Column(
children: [
Row(
children: [
Container(
decoration: BoxDecoration(
borderRadius:
new BorderRadius.all(Radius.circular(10.0)),
shape: BoxShape.rectangle,
border: Border.all(color: Colors.white)),
child: IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {
_controller.openOrCloseDrawer();
},
),
),
Container(
width: MediaQuery.of(context).size.width / 7,
child: Image.asset('assets/images/logo.png')),
Spacer(),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width / 5,
child: TypeAheadField(
hideOnEmpty: true,
textFieldConfiguration: TextFieldConfiguration(
autofocus: true,
style: DefaultTextStyle.of(context)
.style
.copyWith(fontStyle: FontStyle.italic),
decoration: InputDecoration(
border: OutlineInputBorder())),
suggestionsCallback: (pattern) async {
return CitiesService.getSuggestions(pattern);
},
transitionBuilder:
(context, suggestionsBox, controller) {
return suggestionsBox;
},
itemBuilder: (context, suggestion) {
return ListTile(
title: Text(suggestion),
);
},
onSuggestionSelected: (suggestion) {},
)),
Spacer(),
Socal(),
//Spacer(),
],
),
],
),
)
],
),
),
);
}
}
class CitiesService {
static List<String> search = Header().getSearch() as List<String>; //This is not adding data to list
static List<String> getSuggestions(String query) {
print(search); //This does not print any thing.
List<String> matches = List();
matches.addAll(search);
matches.retainWhere((s) => s.toLowerCase().contains(query.toLowerCase()));
return matches;
}
}
I am trying to store the data fetched in getSearch() into search List so that I can use it to provide suggestions but the list is empty. I don't know if this is the correct way to convert future into list of strings. Help would be really appreciated. Also, if there is another way to implement search from FirebaseFirestore, please do let me know.
Thanks in advance.

Answer 1

The problem here is that getSearch is an async function, which mean that it return intially a Future while is awaiting the async part of the function to be fulfilled and continue to execute, so in order to capture that you should be using a future.then() notation, doing something like this while calling getSearch will fix the issue:
Header().getSearch().then((value) {
static List<String> search = value as List<String>;
...
});