Flutter: Autocomplete Textfield not working with custom data type
As @pskink mentioned,
you are using autocomplete_textfield? i had a lot of problems with it, that disappeared when i switched to flutter_typeahead (much better documented package)
So I considered his suggestion, and move to flutter_typeahead
package.
final TextEditingController _typeAheadController = TextEditingController();List<String> usersList;//find and create list of matched stringsList<String> _getSuggestions(String query) { List<String> matches = List(); matches.addAll(usersList); matches.retainWhere((s) => s.toLowerCase().contains(query.toLowerCase())); return matches;}//gets user list from dbvoid _getUsersList() async { usersList = await databaseHelper.getUsersList();}//the above code is defined in the class, before build method//builds the text fieldTypeAheadFormField( textFieldConfiguration: TextFieldConfiguration( controller: _typeAheadController, decoration: InputDecoration(labelText: 'Select a User'), suggestionsCallback: (pattern) { return _getSuggestions(pattern); }, itemBuilder: (context, suggestion) { return ListTile( title: Text(suggestion), ); }, transitionBuilder: (context, suggestionsBox, controller) { return suggestionsBox; }, onSuggestionSelected: (suggestion) { _typeAheadController.text = suggestion; }, validator: (val) => val.isEmpty ? 'Please select a user...' : null, onSaved: (val) => setState(() => _name = val),),//function that pulls data from db and create a list, defined in db class//not directly relevant but it may help someoneFuture<List<String>> getUsersList() async { Database db = await instance.database; final usersData = await db.query("users"); return usersData.map((Map<String, dynamic> row) { return row["name"] as String; }).toList();}
PS: One thing I miss about autocomplete_textfield
is the way that we can pass multiple parameters, as we can inherit from our own custom model e.g user
model. I know it is possible with this, but I'm new to this so still unable to make it work! :(
I was having the same problem, the solution was to put a bool and show a CircularProgressIndicator until all the data in the list is loaded, and thus rendering the AutoCompleteTextField
Ex.:
_isLoading ? CircularProgressIndicator () : searchTextField = AutoCompleteTextField <User> (your component here)