androidflutterautocomplete

Flutter autocomplete widget won't clear text


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?


Solution

  • 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(),
                        ),
                      );
                    },