CODEWITHSUNDEEP
dartflutter
creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126744

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

illustration

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.

Upvotes: 120

Views: 149938

Answers (8)

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126744

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.

Upvotes: 222

samad shukr
samad shukr

Reputation: 1049

onFieldSubmitted: (value){}

textInputAction: TextInputAction.go

Upvotes: 2

MichaelMao
MichaelMao

Reputation: 571

Anyone looking for UIReturnKeyDone is like this:

TextField(
  textInputAction: TextInputAction.done
  ...
)

Upvotes: 3

Ilo Calistus
Ilo Calistus

Reputation: 2175

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

Upvotes: 12

Shirsh Shukla
Shirsh Shukla

Reputation: 5973

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

Upvotes: 5

Mr. RasTazZ
Mr. RasTazZ

Reputation: 931

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

Upvotes: 92

Rémi Rousselet
Rémi Rousselet

Reputation: 277147

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

Upvotes: 8

babernethy
babernethy

Reputation: 1095

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

Upvotes: 1

Related Questions