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 strings
List<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 db
void _getUsersList() async {
usersList = await databaseHelper.getUsersList();
}
//the above code is defined in the class, before build method
//builds the text field
TypeAheadFormField(
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 someone
Future<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! :(
Alena
Updated on December 14, 2022Comments
-
Alena over 1 year
I'm trying to build a text field with autocomplete feature. And I'm using AutoComplete TextField package.
I have Users model class with
fromMap
andtoMap
methods. There's function which retrieves users form database and returns list of usersList<Users>
.Here's the code which builds autocomplete field:
AutoCompleteTextField searchTextField = AutoCompleteTextField<Users>( key: key, clearOnSubmit: false, suggestions: users, style: TextStyle(color: Colors.black, fontSize: 16.0), decoration: InputDecoration( contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0), hintText: "Search Name", hintStyle: TextStyle(color: Colors.black), ), itemFilter: (item, query) { return item.name.toLowerCase().startsWith(query.toLowerCase()); }, itemSorter: (a, b) { return a.name.compareTo(b.name); }, itemSubmitted: (item) { setState(() { searchTextField.textField.controller.text = item.name; }); }, itemBuilder: (context, item) { return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( item.name, ), ], ); }, );
Q. Am I missing something or doing wrong?
NOTE:
- The
users
object have list of users in correct format, I've printed to verify that.
- The