Detect Keyboard event in Flutter - dart

Question

How to detect keyboard events on TextFormField in Flutter? If the user deletes the last letter and presses the delete button again, the cursor should jump back to the previous TextFormField.
I would like to implement a pin-enter screen, something like that one.
https://mobile-solutions.ingenico.com/wp-content/uploads/IMG_022.png

Answer 1

Yes you can do that using onChange And FocusScope for set focus
Here when you delete last letter of second FormField focus set on first FormField
var firstField = FocusNode();
var secondField = FocusNode();
#override
Widget build(BuildContext context) {
return Column(children: <Widget>[
TextFormField(
focusNode: firstField,
onChanged: (text) {
print("First field: $text");
},
),
TextFormField(
focusNode: secondField,
onChanged: (text) {
if (text.length <= 0) {
FocusScope.of(context).requestFocus(firstField);
}
print("Second field: $text");
},
)
]);
}

Answer 2

To implement pin-enter screen, You don't have to manage the Keyboard events. As that screen has different button and each button does the entry as its text.
So logically you just have to add the value of the button to the list and remove the value from the list when delete key is pressed.
You can fill the TextField with the length and data of the list.

Answer 3

I hope this answer helps you. I faced a similar situation and this is how I did it!
class _OtpEntryFormState extends StatelessWidget {
final _formKey = GlobalKey<FormState>();
//Declare your focusNodes
FocusNode node1 = FocusNode();
FocusNode node2 = FocusNode();
FocusNode node3 = FocusNode();
FocusNode node4 = FocusNode();
String pin1;
String pin2;
String pin3;
String pin4;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
//Now create a row widget, where we'll be adding our textboxes
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//TextBox1
SizedBox(
width: 50,
child: TextFormField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: node1,
onChanged: (text) {
if (text.length == 1) {
FocusScope.of(context).requestFocus(node2);
pin1 = text;
}
},
keyboardType: TextInputType.number,
)
),
//Spacing in-between textbox
SizedBox(
width: 20
),
//TextBox2
SizedBox(
width: 50,
child: TextFormField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: node2,
onChanged: (text) {
if (text.length == 1) {
FocusScope.of(context).requestFocus(node3);
pin2 = text;
}
else if (text.isEmpty) {
FocusScope.of(context).requestFocus(node1);
}
},
keyboardType: TextInputType.number,
)
),
//Spacing in-between textbox
SizedBox(
width: 20
),
//TextBox3
SizedBox(
width: 50,
child: TextFormField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: node3,
onChanged: (text) {
if (text.length == 1) {
FocusScope.of(context).requestFocus(node4);
pin3 = text;
}
else if (text.isEmpty) {
FocusScope.of(context).requestFocus(node2);
}
},
)
),
//Spacing in-between textbox
SizedBox(
width: 20
),
//TextBox4
SizedBox(
width: 50,
child: TextFormField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: node4,
onChanged: (text) {
if (text.length == 1) {
FocusScope.of(context).requestFocus(node4);
pin4 = text;
}
else if (text.isEmpty) {
FocusScope.of(context).requestFocus(node3);
}
},
)
),
],
),
//Spacing Between the textbox row and the submit button
SizedBox(
height: 10,
),
//Submit Button
SizedBox(
width: 30,
child: RaisedButton(
color: Colors.blueAccent,
textColor: Colors.white,
onPressed: () {
if (_formKey.currentState.validate()) {
String fullPin = pin1+pin2+pin3+pin4;
String combinedPin = fullPin;
int intPin = int.parse(combinedPin);
print("OPT Pin: " + intPin.toString());
}
},
child:
Text(
'SUBMIT',
)
),
),
],
);
}
}