Changing focus from one text field to the next in Flutter

Question

I have two textFormField widgets. Once the user has completed the first text field I would like to focus on the next textField. Is there a way to do this in Flutter? Currently, the done button just closes the keyboard. I was guessing the focusNode class might be the answer to this but not really sure how that works does anyone have any good examples of focusNode class? Thanks in advance.

Alternative

Answer 1

Yes, FocusNode and the onFieldSubmitted from a TextFormField are probably the way to go.

FocusScope.of(context).requestFocus(focusNode);

Here is an example that may help:

    FocusNode textSecondFocusNode = new FocusNode();

    TextFormField textFirst = new TextFormField(
      onFieldSubmitted: (String value) {
        FocusScope.of(context).requestFocus(textSecondFocusNode);
      },
    );

    TextFormField textSecond = new TextFormField(
      focusNode: textSecondFocusNode,
    );

    // render textFirst and textSecond where you want

You may also want to trigger FocusScope.of() from a button rather than onFieldSubmitted, but hopefully the above example gives you enough context to construct an appropriate solution for your use case.

Sofko

how to change the button on the keyboard in this case? from checkmark to arrow like other apps have – Boeotian

@Boeotian From what I understand, this will not change the button on the keyboard. It will just change the behavior of the enter key on the keyboard so that it will change focus to the next field. It's the best we got for now. – Viburnum

@Boeotian In order to change the check button on the keyboard to an arrow, set the following on your TextFormField. textInputAction: TextInputAction.next – Mcnally

in case you need add more actions to the keyboard, take a look a this package: pub.dartlang.org/packages/keyboard_actions – Aymara

useful for OTP authentication. – Aetolia

In the Android Simulator anyone know how to make the PC/Mac Tab key go to the next field to speed up human testing? – Tank

Answer 2

Screenshot:

---

No need to use FocusNode

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        TextField(
          decoration: InputDecoration(hintText: 'First Name'),
          textInputAction: TextInputAction.next,
          onEditingComplete: () => FocusScope.of(context).nextFocus(),
        ),
        TextField(
          decoration: InputDecoration(hintText: 'Last Name'),
          textInputAction: TextInputAction.done,
          onSubmitted: (_) => FocusScope.of(context).unfocus(),
        ),
      ],
    ),
  );
}

Winola

its is worked for me well is there is any way to focus previous one when tap erase/delete on text input screen – Taxiway

@Taxiway You can use onChanged property and handle your logic in it. – Winola

but if the next texfield has a prefixIcon, it would not get focus, what to do about that? – Glory

Answer 3

There's a similar method like in Android.

Add

textInputAction

parameter to the TextFormField Widget, then add the property as;

 TextInputAction.next

Skiver

Doesn't this only change the pop-up keyboard? – Tank

This actually works but only if the text field has no suffix widget with onPressed set – Dric

@Ammar Mohammad have you find the solution..? – Loraineloralee

Answer 4

This is how I did it:

  var _focusNodes = List.generate(6, (index) => FocusNode()));

And in the TextFormField:

  TextFormField(
    focusNode: _focusNodes[i],
    maxLines: 1,
    textInputAction: TextInputAction.next,
    onChanged: (text) {
      if (i < _controllers.length) {
        if (text.isEmpty)
          _focusNodes[i - 1].requestFocus();
        else
          _focusNodes[i + 1].requestFocus();
      }
    },
  ),

Curassow