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.

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!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.