Reputation: 11634
I've textfield
which displays autocomplete suggestions as the user types, using autocomplete_textfield
package. Now I want to display the selected suggestion in the textfield
, for which, inside itemSubmitted()
method, I am using setState() { currentText = item.<suggestedText>}
which prints the value correctly in console, but I am not sure how to display that value back in textfield
. If I am not wrong, I need to use TextEditingController
to retrieve and set the value in textfield
but not sure how do I use TextEditingController
inside AutoCompleteTextField
.
Current code below:
@override
void initState() {
_loadData();
textField = AutoCompleteTextField<Categories>(
style: new TextStyle(color: Colors.white, fontSize: 16.0),
decoration: new InputDecoration(
suffixIcon: Container(
width: 85.0,
height: 60.0,
color: Colors.green,
child: new IconButton(
icon: new Image.asset(
'assets/search_icon_ivory.png',
color: Colors.white,
height: 18.0,
),
onPressed: () {},
),
),
fillColor: Colors.black,
contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
filled: true,
hintText: 'Search',
hintStyle: TextStyle(color: Colors.white)),
itemSubmitted: (item) {
setState(() {
currentText = item.autocompleteterm;
print(currentText);
});
},
submitOnSuggestionTap: true,
clearOnSubmit: true,
textChanged: (item) {
},
key: key,
suggestions: CategoryViewModel.categories,
textInputAction: TextInputAction.go,
itemBuilder: (context, item) {
return new Container(
color: Colors.black87,
child: Padding(
padding: EdgeInsets.all(8.0),
child: new Text(item.autocompleteterm,
style: TextStyle(
color: Colors.white70,
fontSize: 16.0
)),
),
);
},
itemSorter: (a, b) {
return a.autocompleteterm.compareTo(b.autocompleteterm);
},
itemFilter: (item, query) {
return item.autocompleteterm
.toLowerCase()
.startsWith(query.toLowerCase());
},
);
super.initState();
_getUser();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
backgroundColor: Color(0xFF13212C),
appBar: AppBar(
title: Text('Demo'),
),
drawer: appDrawer(),
body: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Column(children: <Widget>[
textField,
]),
Upvotes: 1
Views: 3423
Reputation: 11634
This can be achieved like this:
itemSubmitted: (item) {
setState(() => textField.textField.controller.text = item.autocompleteterm);
},
And make clearOnSubmit: false
to be able to display selected value in textfield.
Upvotes: 4