FocusNode in Flutter
By: Suraj Gupta
Tags: Focus Node, Flutter Widgets, Forms, Flutter, Dart

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

Table of Content

:: Implementing FocusNode in Forms :: Creating of FocusNode :: 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 first TextFormField 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 :

Resources :