Add Done button to keyboard in particular CupertinoTextField

I need to add Done button to text keyboard which appears after user wants to fill particular CupertinoTextField in app. This text field has a dynamic size which width grows after user types multi-line text in it. How can I do that in Flutter? The code of widget with the textfield:

@override
Widget build(BuildContext context) {
ProductEditBloc bloc = BlocProvider.of(context);
return SingleChildScrollView(
child: CupertinoTextField(
focusNode: focusNode,
maxLines: null,
onChanged: this.widget.onChanged,
controller: this.widget.controller,
keyboardType: TextInputType.multiline,
decoration: BoxDecoration(border: null),
textCapitalization: TextCapitalization.sentences,
placeholder: bloc.productComment == null || bloc.productComment.isEmpty
? “Добавить заметку”
: bloc.productComment,
placeholderStyle: TextStyle(
color: DesignColors.GREY_CHROME,
fontSize: DesignFonts.FONT_SIZE__14,
fontFamily: DesignFonts.FONT_FAMILY__REGULAR),
style: TextStyle(
color: DesignColors.GREY_COAL,
fontSize: DesignFonts.FONT_SIZE__14,
fontFamily: DesignFonts.FONT_FAMILY__REGULAR),
padding: EdgeInsets.only(
left: DesignPadding.V10,
top: DesignPadding.V14,
bottom: DesignPadding.V20,
),
),
);
}

Summary

This text will be hidden

1 Like

Hey! This is quite easy actually. Just use this property

textInputAction: TextInputAction.done,

Please keep in mind that iOS doesn’t support “DONE” on “NUMERIC” keyboards.

You could use third party plugins to implement this, but in my opinion if iOS user is used to this behaviour then you shouldn’t integrate another plugin. You can instead wrap your body in Gesture Detector and close they keyboard when tapped anywhere else on the screen. You can do that by calling - FocusScope.of(context).requestFocus(new FocusNode()); onPressed.

1 Like