Flutter: Autocomplete Textfield not working with custom data type

8,900

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! :(

Share:
8,900
Alena
Author by

Alena

Updated on December 14, 2022

Comments

  • Alena
    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 and toMap methods. There's function which retrieves users form database and returns list of users List<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:

    1. The users object have list of users in correct format, I've printed to verify that.