Easily move the focus between TextFormFields with FocusScopeNode

Form and TextFormField are very useful widgets when entering text input in Flutter.

Can we provide a convenient way of moving the input focus when pressing "next" on the keyboard?

With FocusScopeNode, this is super easy to do.

sponsor

Code with Andrea is free for everyone. Help me keep it that way by checking out this sponsor:

Open-Source Backend Server for Flutter Developers. Appwrite is a secure, self-hosted solution that provides developers with a set of easy-to-use REST APIs to manage their core backend needs. You can build anything with Appwrite! Click here to learn more.

Say you have an email & password input form, which looks like this:

class EmailPasswordSignInForm extends StatefulWidget {
  @override
  _EmailPasswordSignInFormState createState() =>
      _EmailPasswordSignInFormState();
}

class _EmailPasswordSignInFormState extends State<EmailPasswordSignInForm> {
  final FocusScopeNode _node = FocusScopeNode();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  void dispose() {
    _node.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: FocusScope(
        node: _node,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            // email
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Email',
                hintText: 'john@doe.com',
              ),
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.emailAddress,
              // move to the next field
              onEditingComplete: _node.nextFocus,
            ),
            // password
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              obscureText: true,
              textInputAction: TextInputAction.done,
              // move to the next field
              onEditingComplete: _node.nextFocus,
            ),
            // submit
            RaisedButton(
              child: Text('Sign In'),
              onPressed: () {/* submit code here */},
            ),
          ],
        ),
      ),
    );
  }
}

By adding a FocusScope and the associated FocusScopeNode, you can easily move the focus to the next TextFormField by passing _node.nextFocus to onEditingComplete.

And just as easily, you can call _node.previousFocus() if you need to go back.

NOTE: This works with TextField as well, so you can use it even without a Form.

Details matter, and these little time-savers can make our users happy.

Happy coding!