How do I change Text Input Action Button (return/enter key) on Keyboard in Flutter?

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
  ...
)

List of all available input actions.

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),
  ),
);

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,
),

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

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)),
    )

How do I change Text Input Action Button (return/enter key) on Keyboard in Flutter?

Related

Recent Posts