I have this flutter autocomplete widget in Android Studio:
Autocomplete<String>(
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text.isEmpty) {
return const Iterable<String>.empty();
}
return animalSuggestions.where((option) {
return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (String selection) {
_animalController.text = selection; // Explicitly set value
},
fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
return TextField(
controller: textEditingController, // Use internal controller to manage suggestions
focusNode: focusNode,
decoration: InputDecoration(
labelText: 'Search Animal',
border: OutlineInputBorder(),
),
);
},
optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
return Align(
alignment: Alignment.topLeft,
child: Material(
elevation: 4.0,
child: SizedBox(
height: 200.0, // Set a fixed height for the options list
child: ListView.builder(
padding: EdgeInsets.all(8.0),
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final String option = options.elementAt(index);
return ListTile(
title: Text(option),
onTap: () {
onSelected(option);
},
);
},
),
),
),
);
},
),
In my class I declare a TextEditingController called _animalController which I use to get the value selected from the autocomplete dropdown list
List<String> animalSuggestions = [];
TextEditingController _animalController = TextEditingController();
This all seems to work fine, until I try and clear the text in the autocomplete widget using this code
_animalController.clear();
I can see that the _animalController text is cleared, but the text displayed in the autocomplete widget remains. I understand this is because the widget is using the internal textEditingController to display text. And I either need to clear this (which I am not sure how to) or I need to change the internal textEditingController to the _animalController (which I have control over). But when I do this, then my optionsBuilder logic (which apparently controls how my dropdown list is filtered as I type) stops working and I can no longer see any suggestions. Any ideas how to fix this?
If you use an outside variable you can clear:
TextEditingController textEditingController = TextEditingController();
and
ElevatedButton(onPressed:(){
textEditingController.clear();
_animalController.clear();
}, child: Container(height: 20,width: 20,color: Colors.blueAccent,),
),
You need to clean the TextField to remove the text from your widget.
fieldViewBuilder: (BuildContext context, _, FocusNode focusNode, VoidCallback onFieldSubmitted) {
return TextField(
controller: textEditingController, // Use internal controller to manage suggestions
focusNode: focusNode,
decoration: InputDecoration(
labelText: 'Search Animal',
border: OutlineInputBorder(),
),
);
},
or you also can do this:
fieldViewBuilder: (BuildContext context, TextEditingController textController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
textEditingController = textController;
return TextField(
controller: textEditingController, // Use internal controller to manage suggestions
focusNode: focusNode,
decoration: InputDecoration(
labelText: 'Search Animal',
border: OutlineInputBorder(),
),
);
},