flutterdartflutter-cupertino

Flutter show Cancel-Button on CupertinoSearchTextField


I am using the CupertinoSearchTextField in my app. It is working fine so far but I am missing one feature: the Cancel-Button.

In native iOS you can set to show the button which looks like this:

enter image description here

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.


Solution

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