Launch Offer

Flutter Foundations Course

Buy now and get 25% off the regular price!

View Course

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.

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.

The Complete Flutter Course Bundle

The Complete Flutter Course Bundle

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

Flutter Animations Masterclass - Full Course

Flutter Animations Masterclass - Full Course

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