CODEWITHSUNDEEP
flutterdart
Navid Boloorian
Navid Boloorian

Reputation: 31

Is there anyway to add a placeholder/hint text to the Flutter Autocomplete widget?

I'm trying to add a hint/placeholder to the Autocomplete widget similar to what is used in TextField. Ideally, this text will disappear when the the user inputs anything and will reappear when the field is empty. Combing through the documentation, initialValue was the only thing I could find but the issue is that the text would remain when the user types. I'm currently considering a workaround using a Focus widget and clearing the initialValue when the input is focused and repopulating when the focus is removed. This would likely require the usage of a state variable that stores the placeholder text.

Is there a cleaner way than this?

Obviously this isn't functional code but the first idea would be something like:

String placeholder; // state variable
...
Autocomplete(initialValue: placeholder, ...);
...
Autocomplete.onFocus(): setState(placeholder = "");
Autocomplete.notFocused() && input.length == 0: setState(placeholder = "Enter text here...");

Upvotes: 1

Views: 2777

Answers (3)

abdessamad jabri
abdessamad jabri

Reputation: 41

You just need to add "fieldViewBuilder" to your "Autocomplete" that return TextformField with your hint text :

Autocomplete<String>(
                                  optionsBuilder:
                                      (TextEditingValue textEditingValue) {
                                    ...
                                  },
                                  fieldViewBuilder: ((context,
                                      textEditingController,
                                      focusNode,
                                      onFieldSubmitted) {
                                    return TextFormField(
                                      controller: textEditingController,
                                      focusNode: focusNode,
                                      onEditingComplete: onFieldSubmitted,
                                      decoration: const InputDecoration(
                                          hintText: 'Your hint text'),
                                    );
                                  }),
                                  
                                ),

Upvotes: 4

Navid Boloorian
Navid Boloorian

Reputation: 31

Found a good solution. Posting here for anyone else wondering.

I simply switched from the Autcomplete widget to the RawAutocomplete widget. The latter exposes the underlying text field which can than have hint text added to it.

Old

Autocomplete<T>(
    optionsViewBuilder: (context, onSelected, options) {
      ...
    },
    optionsBuilder: (textEditingValue) {
      ...
    },
  ),
);

New

RawAutocomplete<T>(
    fieldViewBuilder:
        ((context, textEditingController, focusNode, onFieldSubmitted) =>
            TextFormField( // exposed text field
              ...
              decoration: const InputDecoration(hintText: 'Input here...'), // placeholder text
              ...
            )),
    optionsViewBuilder: (context, onSelected, options) {
      ...
    },
    optionsBuilder: (textEditingValue) {
      ...
    },
  );

Here's some more documentation for the specific implementation of RawAutocomplete.

Upvotes: 2

Sergio Clemente
Sergio Clemente

Reputation: 888

U can use the package easy autocomplete https://pub.dev/packages/easy_autocomplete

Like this:

Container(
                                        padding: EdgeInsets.only(left:10.0),
                                        width: (GeneralUtils.deviceIsTablet? screenWidth*0.35:screenWidth *0.25),
                                        height: 50,
                                        child: FutureBuilder(
                                            future: getPhones(),
                                            builder: (context, AsyncSnapshot snapshot) {
                                              
                                                return EasyAutocomplete(
                                                    inputTextStyle: TextStyle(
                                                      color: CustomColors.textLightPrimaryColor,
                                                      fontSize: 14,
                                                      fontWeight: FontWeight.w800,
                                                    ),
                                                   
                                                    controller: _clientPhoneController,
                                                    suggestions: _phoneList,
                                                    onChanged: (_) => null,
                                                    onSubmitted:(_) async{
                                                      getDataByPhone(_clientPhoneController.text);
                                                    },
                                                    decoration: InputDecoration(
                                                      hintText:'Enter the phone',
                                                      hintStyle: TextStyle(
                                                          fontSize: 14,
                                                          fontWeight: FontWeight.w600,
                                                          color: CustomColors.textLightPrimaryColor.withOpacity(0.4)
                                                      ),
                                                      enabledBorder: UnderlineInputBorder(
                                                        borderSide: BorderSide(color: CustomColors.textLightPrimaryColor),
                                                      ),
                                                      focusedBorder: UnderlineInputBorder(
                                                        borderSide: BorderSide(color: CustomColors.textLightPrimaryColor),
                                                      ),
                                                    ),
                                                    suggestionBuilder: (data) {
                                                      return Text(
                                                        data,
                                                        style: TextStyle(
                                                          color: CustomColors.textLightPrimaryColor,
                                                          fontSize: 14,
                                                          fontWeight: FontWeight.w600,
                                                        ),
                                                      );
                                                    }
                                                );
                                             
                                            }),

Upvotes: 0

Related Questions