Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect Keyboard event in Flutter

Tags:

flutter

dart

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

like image 971
swissonid Avatar asked Apr 27 '18 09:04

swissonid


People also ask

How do you get keyboard input on flutter?

For text entry, consider using a EditableText, which integrates with on-screen keyboards and input method editors (IMEs). Creates a widget that receives raw keyboard events. For text entry, consider using a EditableText, which integrates with on-screen keyboards and input method editors (IMEs).


1 Answers

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");
        },
      )
    ]);

}

like image 149
Sanjayrajsinh Avatar answered Oct 11 '22 03:10

Sanjayrajsinh