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

Level up your Flutter app’s performance. Get full visibility into your Flutter app’s performance, including crashes, exceptions in Dart, network health, custom traces, and more. Solve your trickiest issues, optimize user journeys, and wow your end users - again and again.
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 aForm
.
Details matter, and these little time-savers can make our users happy.
Happy coding!