Introduction :
FocusNode basically focuses on the keyboard event. Let’s suppose you want to control the TextFormField widget as soon as the user taps on it, then you use FocusNode. So, FocusNode class is basically an object that can be used to obtain keyboard focus and to handle keyboard events.
Before starting our blog lets quickly access what you will load on your memory after reading this blog
Demo Module
Before starting our blog lets quickly access what you will load on your memory after reading this blog
Table of Content
:: Implementing FocusNode in Forms
:: Usage of FocusNode in a TextFormField
:: Focus a text field when a button is tapped
:: Focus a text field as soon as an application starts
:: Passage of focus on next TextFormField after tapping
Implementing FocusNode in Forms
What is the use of FocusNode?
As we all know that there are many input type TextFormField in our form filling process, we have to input many details in different text area according to its requirement.
When our application has many TextFormFieldand the one which is selected and accepting an input from the user is said to have in a “focus” state. After providing an input to a focused TextFormField our focus now moves to another or says to the next TextFormField area. Here to implement such processes on focusing our selected TextFormField we use FocusNode.
How to focus on a TextFormField when a button is tapped?
Following steps to be performed to focus on a TextFormField
- Create a
FocusNode.
2. Pass the FocusNode .
3. Give focus to the next TextFormFieldwhen the button is tapped.
How to create a FocusNode?
As you can see above image use the following steps to create a FocusNode instance inside a initState() method of a state class, and clean it up in a dispose() method.
Here we have created a five focus node instance for a different focus area.
How to pass FocusNode to a TextFormField ?
TextFormField(
autofocus: true,
focusNode: fname,
keyboardType: TextInputType.text,
enabled: true,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'First Name',
hintText: 'Enter your first name',
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.teal),
),
),
onFieldSubmitted: (term) {
fname.unfocus();
FocusScope.of(context).requestFocus(lname);
},
)
Here we have used an instance fname of FocusNode in the focusNode property to get focus as soon as the user taps on this Textfield.
How to enable focus on the first TextFormField as an application starts or gets visible ?
We will set the autofocus property as true on that input area or TextFormFieldarea as you can see in the above example. For better understanding look down at an image.
To show the keyboard action when the TextFormFieldis focused we use textInputAction property in the TextFormFeild widget.
Example:
How to pass focus to the next TextFormField when the button is tapped ?
We will use the onFieldSubmitted property inside the TextFormField widget to get unfocus from the current focus TextFormField and get focus on the next TextFormField as soon as the button is pressed or when the keyboard next or done input type is pressed.
In the above example, we have used fname.unfocus() method to get unfocus from the firstTextFormFieldarea of an instance named fname as soon as the button is tapped.
As soon as the button is tapped we have successfully unfocused from the current TextFormFieldbut now we have to move our focus to the next TextFormFieldif available we will use:
FocusScope.of(context).requestFocus(lname)
so as to request our focus on the next TextFormField. We will move to the next TextFormFieldwith the help of the instance, we have created for the next TextFormFieldi.e lname in the above example.
main.dart file :
https://gist.github.com/SooRaj-99/77f625d8bfa68791347b66ee32dc8e3d#file-min-dart
Resources :
FocusNode class
An object that can be used by a stateful widget to obtain the keyboard focus and to handle keyboard events. Please see…api.flutter.dev
Focus and text fields
When a text field is selected and accepting input, it is said to have “focus.” Generally, users shift focus to a text…flutter.dev
Thanks for reading this article ❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
If we got something wrong? Let me know in the comments. we would love to improve.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
