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

Question

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.

Possible duplicate: https://stackoverflow.com/questions/30415284/change-uisearchbar-keyboard-search-button-title-in-swift but different enough that I didn't vote. I don't believe your question is related to Flutter. You just wanna know how to change the title of the Enter. — Stephen J, May 01 '18 at 14:38
@StephenJ The question you have linked is only for **native iOS**, not Flutter and I am not sure if this is even `IME` related. — creativecreatorormaybenot, May 01 '18 at 18:00
Ah, I thought it was "like Flutter" more than literally "in", misinterpreted — Stephen J, May 01 '18 at 18:27

creativecreatorormaybenot · Accepted Answer · 2022-04-26T21:05:50.963

186

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.

edited Apr 26 '22 at 21:05

answered Jul 25 '18 at 01:47

creativecreatorormaybenot

114,516
58
291
402

2

Looks like it might be done already: https://github.com/flutter/flutter/pull/18855. – Duncan Jones Jul 29 '18 at 19:12
3

and what about physical keyboard because i've tried this one but its not working for physical keyboard when the user press enter from physical keyboard it's not working – Rutvik Gumasana Dec 18 '19 at 04:27
5

This solution works for Android. For iOS it only works for TextInputType.text and not for TextInputType.number – Tanmay Pandharipande Apr 23 '20 at 14:54
Thanks for keeping this answer up to date – rekire Feb 17 '23 at 09:37

score 86 · Answer 2 · edited Apr 29 '20 at 10:20

86

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

edited Apr 29 '20 at 10:20

creativecreatorormaybenot

114,516
58
291
402

answered Feb 01 '20 at 11:07

Mr. RasTazZ

871
6
3

score 7 · Answer 3 · answered May 03 '18 at 22:20

7

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

answered May 03 '18 at 22:20

Rémi Rousselet

256,336
79
519
432

Try the same thing. But replace `textInputAction` with `actionLabel`. – Rémi Rousselet May 04 '18 at 10:03
Just to make this clear. I did not find a solution with this. So I do not have a "*Go*" button in my app. – creativecreatorormaybenot May 09 '18 at 23:08
That code allows you to separately set keyboard type (email, phone number, ...) and the enter button. But in the end, in flutter there's currently only 2 enter icon available : newline, and a check icon. – Rémi Rousselet May 09 '18 at 23:16
Yes, I realized that some time ago. That is why I am asking the question. My bounty message even states that I am just looking for a solution. You are only saying that with your way I cannot get the `Go` button. I am sure there are ways, maybe only natively. – creativecreatorormaybenot May 09 '18 at 23:19
You'll have to do the change I made above. Then add new values to the `TextInputAction` enum corresponding to the icon you want ("go"). And then support the new values inside flutter engine [here](https://github.com/flutter/engine/search?utf8=%E2%9C%93&q=TextInputAction&type=). – Rémi Rousselet May 09 '18 at 23:32
That's probably complicated though as flutter engine is outside of flutter's repo. Better simply creating an issue listing the required icons. – Rémi Rousselet May 09 '18 at 23:33
Not really. This code adds the ability to change the return button icon ; which is a required step for your answer. The missing piece is edits inside flutter engine to support `TextInputAction.go`. – Rémi Rousselet Jun 24 '18 at 20:29
Enter key icon is choosed by flutter engined based on `TextInputAction`. This code add the ability to change `TextInputAction` on textfield. Now flutter engine need to support new `TextInputAction` values. – Rémi Rousselet Jun 24 '18 at 21:07
There's nothing SO users can do for you. This is a job for flutter team as like I said this requires edits on flutter engine (not the dart side) to support more icons. Followed by the changes listed here, to allow icon customisation. – Rémi Rousselet Jun 24 '18 at 21:16

score 6 · Answer 4 · answered Sep 24 '21 at 05:07

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

score 5 · Answer 5 · answered May 05 '21 at 08:19

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

score 1 · Answer 6 · edited May 01 '18 at 17:56

1

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

edited May 01 '18 at 17:56

creativecreatorormaybenot

114,516
58
291
402

answered May 01 '18 at 14:34

babernethy

1,057
1
9
16

1

I am not searching for whole keyboard layout changes, but only adjustments regarding the action button. – creativecreatorormaybenot May 04 '18 at 09:51

score 1 · Answer 7 · answered Apr 26 '22 at 17:07

1

Anyone looking for UIReturnKeyDone is like this:

TextField(
  textInputAction: TextInputAction.done
  ...
)

answered Apr 26 '22 at 17:07

MichaelMao

528
6
15

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

7 Answers7