Using FocusNode in TextFormField Flutter
I believe this is more or less what you are trying to achieve:
void main() {
runApp(MaterialApp(home: PassCodeExample()));
}
class PassCodeExample extends StatelessWidget {
FocusNode f1 = FocusNode();
FocusNode f2 = FocusNode();
FocusNode f3 = FocusNode();
FocusNode f4 = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
child: TextField(
focusNode: f1,
keyboardType: TextInputType.number,
onChanged: (String newVal) {
if (newVal.length == 1) {
f1.unfocus();
FocusScope.of(context).requestFocus(f2);
}
},
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
Flexible(
child: TextField(
focusNode: f2,
keyboardType: TextInputType.number,
onChanged: (String newVal) {
if (newVal.length == 1) {
f2.unfocus();
FocusScope.of(context).requestFocus(f3);
}
},
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
Flexible(
child: TextField(
focusNode: f3,
keyboardType: TextInputType.number,
onChanged: (String newVal) {
if (newVal.length == 1) {
f3.unfocus();
FocusScope.of(context).requestFocus(f4);
}
},
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
Flexible(
child: TextField(
focusNode: f4,
keyboardType: TextInputType.number,
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
]),
),
),
);
}
}
You can achieve the same by using onSubmitted
or even supplying a unique TextEditingController
to your TextField
s