Flutter: Autocomplete Textfield not working with custom data type Flutter: Autocomplete Textfield not working with custom data type dart dart

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)