In Android and iOS it is possible to change the enter/return key of the keyboard to e.g. a "Go" button (and other options).
On top, we can see the regular "Return" button on both systems, which is the one you get by default with no modifications in both Android & iOS native and Flutter.
Below that, there is another setting, again on both systems, which you can simply adjust in your native application. It is the "Go" button in this case.
The input action for a TextField (or TextFormField) can be specified like this (here, the Go button):
TextField(
textInputAction: TextInputAction.go
...
)
This is how you can use textInputAction:
TextField(
textInputAction: TextInputAction.search,
onSubmitted: (value) {
print("search");
},
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: Icon(Icons.search),
hintText: 'Search ',
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
),
);
Here is how to add the action button and also listen to onTap
For TextField
TextField(
textInputAction: TextInputAction.go,
onSubmitted: (value) {
print("Go button is clicked");
},
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
),
);
For TextFormField
TextFormField(
textInputAction: TextInputAction.go,
onFieldSubmitted: (value) {
print("Go button is clicked");
},
decoration: const InputDecoration(
hintText: "Type your search here",
hintStyle: TextStyle(color: Colors.black26),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(40.0)),
),
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 16.0)),
)
This is currently not possible. Although you can edit flutter sources to make it possible quite easily.
The following edits are :
flutter/lib/src/widgets/editable_text.dart
Change _openInputConnection line ~430 to
void _openInputConnection() {
if (!_hasInputConnection) {
final TextEditingValue localValue = _value;
_lastKnownRemoteTextEditingValue = localValue;
_textInputConnection = TextInput.attach(this,
new TextInputConfiguration(
inputType: widget.keyboardType,
obscureText: widget.obscureText,
autocorrect: widget.autocorrect,
inputAction: widget.keyboardType == TextInputType.multiline
? TextInputAction.newline
: TextInputAction.done
)
)..setEditingState(localValue);
}
_textInputConnection.show();
}
In the same file, also declare a new field on EditableText class (not the state one) ~line 280
final TextInputAction textInputAction;
And assign it in EditableText constructor above line 164
this.textInputAction,
flutter/lib/src/material/text_field.dart
Same story. Add a new field, but to TextField instead :
final TextInputAction textInputAction;
and add the following to it's constructor :
this.textInputAction,
Finally, pass that new field as parameter to EditableText line 479 :
textInputAction: widget.textInputAction,
Done.
You can now inside your app specify a custom TextInputAction. This won't break existing TextField. It just adds the ability to override the default behavior.
new TextField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.newline,
),
textInputAction with actionLabel.Go button. I am sure there are ways, maybe only natively.TextInputAction enum corresponding to the icon you want ("go"). And then support the new values inside flutter engine here.basically we are use two types of text input fields, TextField and TextFormField,
so,
for TextField,
TextField(
textInputAction: TextInputAction.go
.......
)
for TextFormField,
TextFormField(
textInputAction: TextInputAction.go,
........
)
both have textInputAction property, we can use this
Anyone looking for UIReturnKeyDone is like this:
TextField(
textInputAction: TextInputAction.done
...
)
TextField(
textInputAction: TextInputAction.go,
onSubmitted: (value) {
}
)
One angle ... I have not explored all the "keyboardType" options within the TextField (optional parameter of TextInputType).
But there are some obvious different keyboards for 'emailAddress' and 'datetime' and 'phone' - one of those options may emit the keyboard that you are looking for ...
IMErelated.