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
– Harsh Bhikadia, Commented Sep 3, 2018 at 13:24
It's not possible as of now(see github.com/flutter/flutter/issues/11344). Which part of flutter_gallery are you talking about? — Mrigank
– Mrigank, Commented Sep 3, 2018 at 13:27
ohh, i need to find a work around. I meant the flutter_gallery has the same issue. — Harsh Bhikadia
– Harsh Bhikadia, Commented Sep 3, 2018 at 14:00

CopsOnRoad · Accepted Answer · 2021-07-07 05:59:04Z

338

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 7, 2021 at 5:59

answered Feb 28, 2020 at 16:41

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

feng_nyc Over a year ago

this still requires you to click the done button to focus to next input. how about auto focus. auto move to next field?

CopsOnRoad Over a year ago

@Yuhao You can do that too using onChanged property.

OOM Over a year ago

InputDatePickerFormField doesn't implement the textInputAction :/

Pratik Butani Over a year ago

nextFocus() will not work if you use "Password hide/show button" next to TextField.

Abdul Razak Zakieh Over a year ago

Useful answer, I used only textInputAction: TextInputAction.next, and it worked

CopsOnRoad · Accepted Answer · 2020-06-01 08:25:09Z

139

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.

edited Jun 1, 2020 at 8:25

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

answered Sep 3, 2018 at 14:28

Harsh Bhikadia

11k10 gold badges53 silver badges73 bronze badges

5 Comments

Anton Derevyanko Over a year ago

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.

fajar ainul Over a year ago

@Harsh what if there are more than two TextFormFields? 6 maybe

Harsh Bhikadia Over a year ago

@fajarainul The logic remain the same. onFieldSubmitted of second field you requestFocus of third field

user48956 Over a year ago

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.

Antonio Over a year ago

Instead of FocusScope.of(context).requestFocus(focus); you can simply call focus.requestFocus()

Haytham Al-Naeb · Accepted Answer · 2023-09-12 13:04:17Z

37

These are 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 the 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);
  }
}

edited Sep 12, 2023 at 13:04

answered Jul 20, 2020 at 23:07

Haytham Al-Naeb

5711 gold badge7 silver badges8 bronze badges

3 Comments

grAPPfruit Over a year ago

this almost worked, I had to replace onSubmitted: (_) with onEditingComplete: () to make it work with a more difficult layout

Pieter van der Vyver Over a year ago

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.

Titas Černiauskas Over a year ago

Should be: while (FocusScope.of(this).focusedChild!.context == null);

Swaroop Maddu · Accepted Answer · 2021-07-07 06:42:09Z

19

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

edited Jul 7, 2021 at 6:42

answered Jul 2, 2020 at 15:26

Swaroop Maddu

5,0623 gold badges31 silver badges47 bronze badges

2 Comments

Jan Ochwat Over a year ago

It skips fields because TextInputAction.next alone causes the focus to shift

MD. Shafiul Alam Biplob Over a year ago

textInputAction: TextInputAction.next, // onFieldSubmitted: (_) => // FocusScope.of(context).nextFocus(), textInputAction: TextInputAction.next, it's enough to shifting the focus. No need of onFieldSubmit.

Zeeshan Mehdi · Accepted Answer · 2020-08-05 06:19:29Z

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!

thithip · Accepted Answer · 2022-01-20 15:02:18Z

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

trane77 · Accepted Answer · 2021-01-15 23:59:12Z

7

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',
            ),
          )
        ],
      ),
    );
  }
}

answered Jan 15, 2021 at 23:59

trane77

1,93521 silver badges37 bronze badges

2 Comments

kine Over a year ago

You are right, I think it has been fixed here. 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.

trane77 Over a year ago

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

user16017178 · Accepted Answer · 2023-04-27 14:53:23Z

6

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

answered Apr 27, 2023 at 14:53

user16017178

1233 silver badges8 bronze badges

Comments

Quick learner · Accepted Answer · 2020-07-19 17:51:04Z

3

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

answered Jul 19, 2020 at 17:51

Quick learner

11.6k4 gold badges52 silver badges61 bronze badges

Comments

Natesh bhat · Accepted Answer · 2020-09-24 16:52:59Z

3

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

answered Sep 24, 2020 at 16:52

Natesh bhat

13.5k13 gold badges94 silver badges136 bronze badges

Comments

PhuocLuong · Accepted Answer · 2023-01-07 05:13:44Z

3

I hope it's useful

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

answered Jan 7, 2023 at 5:13

PhuocLuong

84910 silver badges18 bronze badges

Comments

Mykhailo · Accepted Answer · 2025-04-08 08:34:45Z

I recently encountered this problem, the solution above, with manually capturing the necessary focus with nextFocus(), will solve the problem, but not the root cause. I think in most cases the problem is that the screen contains icons (for example, the field clear icon) that also capture focus, so the correct solution is to minimize all such widgets in ExcludeFocus, this will allow you to switch to the next one automatically.

DartPad with example

              // Works with ExcludeFocus
              TextFormField(
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  suffixIcon: ExcludeFocus(
                    child: IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: () {},
                    ),
                  ),
                ),
              ),
              // Does not work because the focus is taken away by the icon
              TextFormField(
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: const Icon(Icons.close),
                    onPressed: () {},
                  ),
                ),
              ),

Collectives™ on Stack Overflow

How to shift focus to the next TextField in Flutter?

12 Answers 12

5 Comments

5 Comments

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

5 Comments

5 Comments

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related