FocusNode in Flutter
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 TextFormField
and 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 TextFormField
when 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 TextFormField
area as you can see in the above example. For better understanding look down at an image.
To show the keyboard action when the TextFormField
is 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 firstTextFormField
area 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 TextFormField
but now we have to move our focus to the next TextFormField
if 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 TextFormField
with the help of the instance, we have created for the next TextFormField
i.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!.