How to Listen Focus/Unfocus in Flutter

In this example, we are going to show you how to listen to the change on focus and unfocus events whenever any widget gets focused or unfocused in Flutter. This listener can be used to trigger any code block if any textfield or widget gets focused or unfocused. See the example below:

Method 1: Listen to Focus Change using FocusNode:

Declare the focus node to implement on TextField:

FocusNode myfocus = FocusNode();

Implement the FocusNode to TextField or TextFormField:

TextField(
    focusNode: myfocus,
)

Now, add the focus change listener like below. Remember, the listener below is triggered in both cases: focus and unfocus.

myfocus.addListener(() {
  if(myfocus.hasFocus){
      print("Textfield one got focused.");
  }else{
      print("TextField one got unfocued.");
  }
});

Method 2: Listen to Focus change using Focus() widget:

Focus( 
  onFocusChange: ((value) {
      if(value){
          print("TextField Two got focused.");
      }else{
          print("TextField Tow got unfocused.");
      }
  }),
  child:TextField(), //textfield two
)

You can wrap your widget with Focus() widget, and use the parameter onFocusChange to set the listener. 

Full App Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  FocusNode myfocus = FocusNode();

  @override
  void initState() {
    myfocus.addListener(() {
      if(myfocus.hasFocus){
          print("Textfield one got focused.");
      }else{
          print("TextField one got unfocued.");
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Tab in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          
          body: Container( 
             padding: EdgeInsets.all(20),
             child: Column(
               children: [
                    
                     TextField(
                        decoration: InputDecoration(
                           hintText: "TextField One"
                        ),
                        focusNode: myfocus,
                     ),

                     Focus( 
                      onFocusChange: ((value) {
                          if(value){
                             print("TextField Two got focused.");
                          }else{
                             print("TextField Tow got unfocused.");
                          }
                      }),
                      child:TextField(
                        decoration: InputDecoration(
                           hintText: "TextField Two"
                          )
                        ),
                     )
               ],
             ),
          )
    );
  }
}

Output while running the app:

I/flutter (26024): Textfield one got focused.
I/AssistStructure(26024): Flattened final assist data: 500 bytes, containing 1 windows, 3 views
I/flutter (26024): TextField Two got focused.
I/flutter (26024): TextField one got unfocued.
I/AssistStructure(26024): Flattened final assist data: 500 bytes, containing 1 windows, 3 views
I/flutter (26024): TextField is un focused.
I/flutter (26024): Textfield one got focused.

In this way, you can listen to focus change when your TextField/TextFormField got focused or unfocused in Flutter.