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