how to use TextEditingController from Autocomplete widget Flutter

Question

I need to use TexteditingController of the widget "autocomplete". is to use the clear function when a stepper changes stage

I need to do that since if I go back a stage the text entered previously remains this is the autocomplete code:

Autocomplete<Profesional>(
                     
                      optionsViewBuilder: (BuildContext context,
                          AutocompleteOnSelected<Profesional> onSelected,
                          Iterable<Profesional> options) {
                        return Align(
                          alignment: Alignment.topLeft,
                          child: Material(
                            elevation: 4.0,
                            child: SizedBox(
                              height: 200.0,
                              child: ListView.builder(
                                padding: const EdgeInsets.all(8.0),
                                itemCount: options.length,
                                itemBuilder: (BuildContext context, int index) {
                                  final Profesional option =
                                      options.elementAt(index);
                                  return GestureDetector(
                                    onTap: () {
                                      onSelected(option);
                                    },
                                    child: ListTile(
                                      title: Text(option.cod),
                                    ),
                                  );
                                },
                              ),
                            ),
                          ),
                        );
                      },
                      optionsBuilder: (TextEditingValue query) {
                        return viewModel.efectores.where((efector) {
                          return efector.cod
                                  .toLowerCase()
                                  .contains(query.text.toLowerCase()) ||
                              efector.nombre
                                  .toLowerCase()
                                  .contains(query.text.toLowerCase());
                        });
                      },
                      fieldViewBuilder: (BuildContext context,
                          TextEditingController textEditingController,
                          FocusNode focusNode,
                          VoidCallback onFieldSubmitted) {
                        return TextFormField(
                          controller: textEditingController,
                          decoration: const InputDecoration(
                            hintText: 'Seleccione Efector',
                          ),
                          autofocus: true,
                          focusNode: focusNode,
                          onFieldSubmitted: (String value) {
                            onFieldSubmitted();
                          },
                        );
                      },
                      displayStringForOption: (efector) {
                        return efector.cod + ' - ' + efector.nombre;
                      },
                      onSelected: (efector) {
                        
                        viewModel.efector = efector;
                      }),

Solution

You can use RawAutocomplete instead of Autocomplete.

In this case, you can pass your own TextEditingController and FocusNode. Then use the TextEditingController clear method to clear text if when needed.

If you need to clear the autocomplete view from the parent widget user global key.

See sample code here:

class CustomAutocomplete extends StatelessWidget {
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  final GlobalKey _autocompleteKey = GlobalKey();

  final List<String> _options = <String>[
    'aardvark',
    'bobcat',
    'chameleon',
  ];

  CustomAutocomplete({Key? key}) : super(key: key);

  void clear() {
    _textEditingController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return RawAutocomplete<String>(
      key: _autocompleteKey,
      focusNode: _focusNode,
      textEditingController: _textEditingController,
      optionsBuilder: (TextEditingValue textEditingValue) {
        return _options.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        }).toList();
      },
      optionsViewBuilder: (BuildContext context,
          AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
        return Material(
          elevation: 4.0,
          child: ListView(
            children: options
                .map((String option) => GestureDetector(
                      onTap: () {
                        onSelected(option);
                      },
                      child: ListTile(
                        title: Text(option),
                      ),
                    ))
                .toList(),
          ),
        );
      },
    );
  }
}

Comments

[Adolfo Martinez]

Thanks for all. It helped me a lot. Gracias!