How to shift focus to the next TextField in Flutter?

Question

I am new to Flutter.

I am building a form with multiple text inputs using following widgets: Form, TextFormField. The keyboard that appears doesn't show "next" (which should shift the focus to next field) field action instead it is "done" action (which hides the keyborad).

I looked for any hints in official docs, found nothing directly that can be done. I although landed on FocusNode(cookbook, api doc). It provides with mechanism to shift focus by some button or any other action on app, but I want it to be in keyboard.

also in flutter_gallery it is the same. there should be some mechanism though. — Harsh Bhikadia, Sep 03 '18 at 13:24
It's not possible as of now(see https://github.com/flutter/flutter/issues/11344). Which part of flutter_gallery are you talking about? — Mrigank, Sep 03 '18 at 13:27
https://stackoverflow.com/questions/51909798/using-focusnode-in-textformfield-flutter/51910285#51910285 — Shady Aziza, Sep 03 '18 at 13:57
ohh, i need to find a work around. I meant the flutter_gallery has the same issue. — Harsh Bhikadia, Sep 03 '18 at 14:00

CopsOnRoad · Answer 1 · 2021-07-07T05:59:04.717

297

Screenshot:

Just use:

textInputAction: TextInputAction.next: To move the cursor to the next field.

textInputAction: TextInputAction.done: To close the keyboard.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(hintText: 'TextField A'),
          textInputAction: TextInputAction.next, // Moves focus to next.
        ),
        TextField(
          decoration: InputDecoration(hintText: 'TextField B'),
          textInputAction: TextInputAction.next, // Moves focus to next.
        ),
        TextField(
          decoration: InputDecoration(hintText: 'TextField C'),
          textInputAction: TextInputAction.done, // Hides the keyboard.
        ),
      ],
    ),
  );
}

edited Jul 07 '21 at 05:59

answered Feb 28 '20 at 16:41

CopsOnRoad

237,138
77
654
440

28

Thanks for this, not complicated and easy to apply. – Allen Andre Indefenzo Mar 09 '20 at 12:43
this still requires you to click the done button to focus to next input. how about auto focus. auto move to next field? – Yuhao Mar 25 '20 at 14:18
3

@Yuhao You can do that too using `onChanged` property. – CopsOnRoad Mar 25 '20 at 14:49
2

@CopsOnRoad Awesome answer. Super simple. This should be the accepted answer – tyirvine Apr 27 '20 at 19:25
1

InputDatePickerFormField doesn't implement the textInputAction :/ – OOM Nov 02 '20 at 12:48
8

`nextFocus()` will not work if you use "Password hide/show button" next to TextField. – Pratik Butani Mar 18 '21 at 10:57
Useful answer, I used only textInputAction: TextInputAction.next, and it worked – Abdul Razak Zakieh Apr 05 '21 at 16:31
Pretty clean approach! – Anuj Gajbhiye Apr 24 '21 at 12:58
@AnujGajbhiye You forgot to upvote the answer :) – CopsOnRoad Apr 24 '21 at 14:06

score 132 · Accepted Answer · edited Jun 01 '20 at 08:25

Found a way to achieve it.

Displaying Next Icon instead of Done - setting textInputAction parameter to TextInputAction.next

Using onFieldSubmitted callback to request focus node of next field.

class FormWidget extends StatelessWidget{    
   final focus = FocusNode();
   @override
   Widget build(BuildContext context) {
    return Form(
      child: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            TextFormField(
              textInputAction: TextInputAction.next,
              autofocus: true,
              decoration: InputDecoration(labelText: "Input 1"),
              onFieldSubmitted: (v){
                FocusScope.of(context).requestFocus(focus);
              },
            ),
            TextFormField(
              focusNode: focus,
              decoration: InputDecoration(labelText: "Input 2"),
            ),
          ],
        ),
      ),
    );
  }
}

Edit: As stated in the documentation (flutter.io/docs/cookbook/forms/focus), - we also need to manage FocusNode lifecycle. So, init FocusNode in the init() method and dispose in dispose() of the parent Widget. - @AntonDerevyanko

Update: The same can be achieved without FocusNode and FocusScopeNode, by simply calling FocusScope.of(context).nextFocus(), take a look at CopsOnRoad solution on how to do that. For more info check doc.

As stated in the documentation (https://flutter.io/docs/cookbook/forms/focus), - we also need to manage FocusNode lifecycle. So, init FocusNode in the init() method and dispose in dispose() of the parent Widget. — Anton Derevyanko, Feb 05 '19 at 18:52
@Harsh what if there are more than two TextFormFields? 6 maybe — fajar ainul, Sep 13 '19 at 07:51
@fajarainul The logic remain the same. `onFieldSubmitted` of second field you `requestFocus` of third field — Harsh Bhikadia, Sep 15 '19 at 08:49
This solution has a bug. If you press tab, then tab not only changes focus, but is added to as text to the form field - this is not normal behavior for a form. Tab should change focus, or enter text, never both. — user48956, Dec 16 '19 at 20:45
Instead of `FocusScope.of(context).requestFocus(focus);` you can simply call `focus.requestFocus()` — Antonio, Feb 15 '20 at 12:18

Haytham Anmar · Answer 3 · 2021-11-10T17:49:28.853

This is additional steps to CopsOnRoad answer since it doesn't work in more complex UI when there are focusable widgets in between text fields, for example:

when password field has a clickable toggle icon
when there is a button (or some other focusable widget) between fields...

the solution here is to keep calling 'nextFocus()' until 'EditableText' is found

   @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(hintText: "TextField A"),
              textInputAction: textInputAction1,
              onSubmitted: (_) => context.nextEditableTextFocus(), // move focus to next
            ),
            TextField(
              decoration: InputDecoration(hintText: "TextField B"),
              textInputAction: textInputAction2,
              onSubmitted: (_) => context.nextEditableTextFocus(), // move focus to next
            ),
            MaterialButton(
             onPressed: () {},
             color: Colors.amber,
            ),
            TextField(
              decoration: InputDecoration(hintText: "TextField C"),
              textInputAction: textInputAction3,
              onSubmitted: (_) => FocusScope.of(context).unfocus(), // submit and hide keyboard
            ),
          ],
        ),
      );
    }

Where the extension method is:

extension Utility on BuildContext {
  void nextEditableTextFocus() {
    do {
      FocusScope.of(this).nextFocus();
    } while (FocusScope.of(this).focusedChild?.context?.widget is! EditableText);
  }
}

this almost worked, I had to replace `onSubmitted: (_)` with `onEditingComplete: ()` to make it work with a more difficult layout — grAPPfruit, Feb 10 '21 at 21:30
Excellent, thanks for the help with this. Worked perfectly for me. — Eradicatore, Feb 19 '21 at 16:25
Spent almost 3 hours looking into this issue. Thank you for this. Login form never had the issue as email field has no icon and password with the button was set to unfocus but when doing my password reset with old and 2 new password fields standard focusNext would close keyboard every time until I found this. — Pieter van der Vyver, Oct 20 '21 at 11:45

Swaroop Maddu · Answer 4 · 2021-07-07T06:42:09.920

For TextFormFeild use can use onFieldSubmitted

TextFormField(
          decoration: InputDecoration(hintText: "Username"),
          textInputAction: TextInputAction.next,
          onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(), // focus to next
        ),
TextFormField(
          decoration: InputDecoration(hintText: "Password"),
          textInputAction: TextInputAction.done,
          onFieldSubmitted: (_) => FocusScope.of(context).unfocus(), // Unfocus and hide keyboard
        ),

Don't know the exact reason but onFieldSubmitted sometimes skips one or more fields in that case onEditingComplete works as expected

TextFormField(
          decoration: InputDecoration(hintText: "Username"),
          textInputAction: TextInputAction.next,
          onEditingComplete : (_) => FocusScope.of(context).nextFocus(), // focus to next
        ),
TextFormField(
          decoration: InputDecoration(hintText: "Password"),
          textInputAction: TextInputAction.done,
          onEditingComplete : (_) => FocusScope.of(context).unfocus(), // Unfocus and hide keyboard
        ),

It skips fields because `TextInputAction.next` alone causes the focus to shift — Jan Ochwat, Jul 05 '23 at 13:19
textInputAction: TextInputAction.next, // onFieldSubmitted: (_) => // FocusScope.of(context).nextFocus(), textInputAction: TextInputAction.next, it's enough to shifting the focus. No need of onFieldSubmit. — MD. Shafiul Alam Biplob, Aug 28 '23 at 21:21

score 12 · Answer 5 · answered Aug 05 '20 at 06:19

For me this worked it moves to next input on entering first digit

Row(
                  children: <Widget>[
                    Expanded(
                      child: TextFormField(
                        textInputAction: TextInputAction.next,
                        onChanged: (_) => FocusScope.of(context).nextFocus(),
                          controller:c1 ,)
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Expanded(
                      child: TextFormField(
                        textInputAction: TextInputAction.next,
                        onChanged: (_) => FocusScope.of(context).nextFocus(),
                          controller:c2 ,),
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Expanded(
                      child: TextFormField(
                          controller:c3 ,
                        textInputAction: TextInputAction.next,
                        onChanged: (_) => FocusScope.of(context).nextFocus(),),
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Expanded(
                      child: TextFormField(
                          controller:c4 ,
                        textInputAction: TextInputAction.next,
                        onChanged: (_) => FocusScope.of(context).nextFocus(),),
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Expanded(
                      child: TextFormField(

                          controller:c5 ,
                        textInputAction: TextInputAction.next,
                        onChanged: (_) => FocusScope.of(context).nextFocus(),),
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Expanded(
                      child: TextFormField(
                          controller:c6 ,
                        textInputAction: TextInputAction.next,
                        onChanged: (_) => FocusScope.of(context).unfocus(),
                          ),
                    )
                  ],
                )

I used your code to set textfield next to each other, I am beginner in flutter. Thanks! — Niraj, Dec 22 '20 at 12:55

score 9 · Answer 6 · answered Jan 20 '22 at 15:02

Thanks for the extension shared by @haytham-anmar and the extension from @natesh-bhat!

But this will not work anymore for the future release of Flutter due to a breaking change on EditableText tree (ref.: Move text editing Actions to EditableTextState #90684).

Please consider the following migration code:

Before migration:

extension Utility on BuildContext {
  void nextEditableTextFocus() {
    do {
      FocusScope.of(this).nextFocus();
    } while (FocusScope.of(this).focusedChild?.context?.widget is! EditableText);
  }
}

After migration:

extension Utility on BuildContext {
  void nextEditableTextFocus() {
    do {
      FocusScope.of(this).nextFocus();
    } while (FocusScope.of(this).focusedChild!.context == null);
  }
}

score 6 · Answer 7 · answered Jan 15 '21 at 23:59

I tried by adding just the textInputActionproperty, and it worked without anything else.

Maybe newer versions of Flutter have improved this functionality? Or StatefulWidget & FormKey are needed to have this working?

I'm on Flutter (Channel stable, 1.22.5)

Give it a try:

class MyForm extends StatefulWidget {
  @override
  State createState() => _myFormState();
}

class _myFormState extends State<MyForm> {
  //
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            // *** Just added this
            textInputAction: TextInputAction.next,
            decoration: const InputDecoration(
              labelText: 'Input 1',
            ),
          ),
          TextFormField(
            textInputAction: TextInputAction.done,
            decoration: const InputDecoration(
              labelText: 'Input 2',
            ),
          )
        ],
      ),
    );
  }
}

You are right, I think it has been fixed [here](https://github.com/flutter/flutter/issues/63575). Actually it is now an error to call `nextFocus` if you have set `textInputAction` to `TextInputAction.next`, it would cause skipping one field. So that was a breaking change. — kine, Mar 23 '21 at 17:17
I don't know, the return key-different action setting exists since many years (more than 10 in iOS). But I cannot tell you the same about Flutter support, maybe the behaviour has been "mapped" recently. Anyway, as long as one doesn't need particular behaviours, I would stick to using textInputAction, as it the default for an application, and users are accustomed to that :) — funder7, Mar 23 '21 at 21:24

score 3 · Answer 8 · answered Apr 27 '23 at 14:53

In the latest flutter version, All the above ways do not work if you have a visible icon or any other icon in your form field. You can use this way to make it work

Create FocusNode for each of your TextFormFields, assign it to the TextFormFields and onEditingComplete, request focus to the next Node.

  FocusNode textFieldOne = FocusNode();
  FocusNode textFieldTwo = FocusNode();

  // ...

  TextFormField(
        onChanged: (_) {
           textFieldTwo.requestFocus();
        },
        focusNode: textFieldOne,
        controller: textController,
  )```

score 2 · Answer 9 · answered Jul 19 '20 at 17:51

I used onSubmitted instead of onFieldSubmitted

Example code

      TextField(
                textInputAction: TextInputAction.next,
                onSubmitted: (_) => FocusScope.of(context).nextFocus(),
                controller: _phoneController,
                decoration: const InputDecoration(
                  labelText: 'Phone number',
                ),
                style: TextStyle(fontSize: 16.0, color: Colors.white),
              ),

score 2 · Answer 10 · answered Sep 24 '20 at 16:52

You can use this helper function to focus the next text field :

void focusNextTextField(BuildContext context) {
  do {
    var foundFocusNode = FocusScope.of(context).nextFocus();
    if (!foundFocusNode) return;
  } while (FocusScope.of(context).focusedChild.context.widget is! EditableText);
}

score 0 · Answer 11 · answered Jan 07 '23 at 05:13

I hope it's useful

textInputAction: TextInputAction.next,
        onEditingComplete: () {
             FocusScope.of(context).nextFocus();
        },
        onSubmitted: (value) {
            if (value.isNotEmpty) {
                  FocusScope.of(context).nextFocus();
            }
        },

How to shift focus to the next TextField in Flutter?

11 Answers11

Linked