I am using the

Does Flutter provide this functionality? I couldn't find it anywhere.

Clarification:

I don't mean the x/clear-button. I know that is build-in. What I mean is the actual Cancel-button which removes focus from the textField.

CodePudding user response：

use

TypeAheadField<String>(
                   hideOnEmpty: true,
                    minCharsForSuggestions: 2,
                    getImmediateSuggestions: true,
                    textFieldConfiguration: TextFieldConfiguration(
                      controller: cont_search,
                      cursorColor: Colors.grey,
                     textInputAction: TextInputAction.search,
                      decoration: InputDecoration(
                       //here the cancel button
                        suffixIcon: IconButton(
                          padding: EdgeInsets.fromLTRB(8, 4, 8, 8),
                          icon: Icon(Icons.clear),
                          onPressed: (){
                              cont_search.clear();
                          },
                        ),
                        focusColor: Colors.black,
                        focusedBorder: InputBorder.none,
                          border: InputBorder.none,
                          //hintText: 'What are you looking for?',
                        icon: Icon(Icons.search),
                      ),
                      onSubmitted: (value){
                       print("value taken is ${value}");
                        Navigator.of(context).push(MaterialPageRoute(
                            builder: (context) => search_page(value)
                        ));
                      }
                    ),
                    suggestionsCallback: (String pattern) async {
                      return matches
                          .where((item) =>
                          item.toLowerCase().startsWith(pattern.toLowerCase()))
                          .toList();
                    },
                    itemBuilder: (context, String suggestion) {
                      return ListTile(
                        title: Text(suggestion),
                      );
                    },
                    onSuggestionSelected: (String suggestion) {
                      //push to page
                      Navigator.of(context).pushReplacement(MaterialPageRoute(
                          builder: (context) => search_page(suggestion)
                      ));
                      print("Suggestion selected ${suggestion}");
                    },

                  )

CodePudding user response：

If you wanna override x/clear-button's behaviour to unfocus the textfield, use this. Otherwise, you can put search textfield and a clear button in a row and implement button's behaviour like this. Problem solved.

 onSuffixTap: (){
    FocusScope.of(context).unfocus();
 }

CodePudding user response：

I ended up building it myself. I made use of the Focus-Widget and most important the AnimatedPadding. My code looks like this:

  Row(
    children: [
      Flexible(
        child: AnimatedPadding(
          duration: const Duration(milliseconds: 100),
          padding: EdgeInsets.only(right: _isSearching ? 50 : 0),
          child: Focus(
            onFocusChange: (hasFocus) {
              setState(() {
                _isSearching = hasFocus;
              });
            },
            child: CupertinoSearchTextField(
              placeholder: 'Suche'.tr,
              controller: _textEditingController,
              focusNode: _focusNode,
            ),
          ),
        ),
      ),
      if (_isSearching)
        Tappable(onTap: () {
          dismissKeyboard();
        }, builder: (context, isTapped) {
          return AnimatedText(
            text: 'Abbrechen',
            isTapped: isTapped,
            style: AppTextStyles.avenirNextH4Regular,
            color: grey,
          );
        }),
    ],
  ),