FocusNode In Flutter

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.

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.

late FocusNode nameFocusNode;

// intialise it in initState method
  @override
  void initState() {
    nameFocusNode=FocusNode();
    super.initState();
  }

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.

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();
  }

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.

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"),
                ),


              )
            ],
          )

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.

Abhishek Rathore 30 September 2022

. . .

FocusNode In Flutter

1. Creating FocusNode

2. Setting up the Listener

3. Bounding the FocusNode

NOTES:

4. Conclusion

Leave a Comment Cancel Reply

Message Sent!