In this blog, we are going to learn about FocusNode In Flutter and check how it works with TextFormField or you can say Edit text if you are from an Android development background.
FocusNode basically controls the Keyboard behavior on the TextFormField, when the user clicks on the TextFormField then FocusNode will be activated and control the behavior.
You can also explore our Flutter app development company page.
Let’s check how we can implement the FocusNode In Flutter.
1. Creating FocusNode
Firstly we will create the FocusNode according to our TextFormField and initialize them. In our demo, we have created one FocusNode as we are going to observe the Keyboard behavior on a single field, which you can create according to your usage.
|
1 2 3 4 5 6 7 8 |
late FocusNode nameFocusNode; // intialise it in initState method @override void initState() { nameFocusNode=FocusNode(); super.initState(); } |
2. Setting up the Listener
You can set the FocusNode listener and can also dispose of it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
void setFocusListener() { nameFocusNode.addListener(() { if (!nameFocusNode.hasFocus) { }else{ } }); } // dispose it when the screen closes @override void dispose() { nameFocusNode.addListener(() { super.dispose(); }); super.dispose(); } // call the listener method @override void initState() { setFocusListener(); super.initState(); } |
3. Bounding the FocusNode
Now, we can bound the FocusNode with TextFormField and can get the update on the focus changes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextFormField( controller: controller, focusNode:nameFocusNode , decoration: const InputDecoration( label: Text("Enter the name"), ), ), TextFormField( controller: controller, focusNode:email , decoration: const InputDecoration( label: Text("Email"), ), ) ], ) |
NOTES:
=> With the help of a listener, we can observe whether the TextFormField has focus or not
=> You can also use Focusnode for managing the data in Dynamic forms
4. Conclusion
In this blog, you have learned about the FocusNode In Flutter.
For more information regarding this, please follow the link.