I have a TextFormField that is supposed to receive digits. On entry of first digit it should jump to second TextFormField then to the third TextFormField. Each TextFormField has the FocusNode property I just do not know how to use it. I have this
TextFormField( //First Field
autofocus: true,
focusNode: FocusNode(),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0)
),
),
style: TextStyle(
color: Colors.orange,
fontSize: 15.0,
),
keyboardType:
TextInputType.number,
maxLength: 1,
),
// second Field
TextFormField(),
//third Field
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