How to access TextEditingController in flutter fieldViewBuilder

1.5k views Asked by At

I have a TextEditingController within a fieldViewBuilder, however, I can't access it outside of the RawAutocomplete widget.

RawAutocomplete<String>(
                  optionsBuilder: (TextEditingValue textEditingValue) {
                    return foodTags.where((String option) {
                      return option
                          .contains(textEditingValue.text.toLowerCase());
                    });
                  },
                  onSelected: (String selection) {
                    setState(() {
                      _autocompleteSelection = selection;
                    });
                  },
                  fieldViewBuilder: (BuildContext context,
                      TextEditingController textEditingController,
                      FocusNode focusNode,
                      VoidCallback onFieldSubmitted) {
                    return TextFormField(
                      textInputAction: TextInputAction.next,
                      style: const TextStyle(color: Colors.white),
                      controller: textEditingController,
                      focusNode: focusNode,
                      onFieldSubmitted: (String value) {
                        onFieldSubmitted();
                      },
                      validator: (String? value) {
                        if (!foodTags.contains(value)) {
                          return 'Nothing selected.';
                        }
                        return null;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(20),
                        labelText: 'Food Type',
                        labelStyle: GoogleFonts.poppins(color: Colors.white),
                        focusColor: Colors.white,
                        fillColor: Colors.white,
                        enabledBorder: OutlineInputBorder(
                          borderSide: const BorderSide(
                              width: 3, color: Color(0xff6c5ce7)),
                          borderRadius: BorderRadius.circular(15),
                        ),
                      ),
                    );
                  },
                  optionsViewBuilder: (BuildContext context,
                      AutocompleteOnSelected<String> onSelected,
                      Iterable<String> 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 String option = options.elementAt(index);
                              return GestureDetector(
                                onTap: () {
                                  onSelected(option);
                                },
                                child: ListTile(
                                  title: Text(option),
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                    );
                  },
                ),

enter image description here

How can I access the textEditingController TextEditingController outside of the RawAutocomplete widget?

1

There are 1 answers

0
TarHalda On BEST ANSWER

That TextEditingController is passed into the fieldViewBuilder by the RawAutocomplete widget. You cannot access it outside of the fieldViewBuilder because it is declared as a parameter of that method. However, you can pass your own TextEditingController into the RawAutocomplete widget:

RawAutocomplete<String>(
      key: _autocompleteKey,
      focusNode: _focusNode,
      textEditingController: _textEditingController,
)

(example copied from how to use TextEditingController from Autocomplete widget Flutter)