How to listen focus change in flutter?

Question

In Android, we can call setOnFocusChangeListener(), do something in onFocusChanged() method, but flutter does not provider onFocus() interface like onTap() in GestureDetector or onKey() in RawKeyboardListener.

I have read flutter api about focus, https://docs.flutter.io/flutter/widgets/FocusManager-class.html but I can't find a way to realize my request, anyone who can give me a hand?

I agree - its hard to understand the intent from the documentation. Example would be great as well. — Ride Sun, Jan 31 '18 at 22:45
[Haider Abbas](https://stackoverflow.com/users/4729459) posted an [Answer](https://stackoverflow.com/a/67089822) saying "You may use MouseRegion() events like [https://api.flutter.dev/flutter/widgets/MouseRegion-class.html](https://api.flutter.dev/flutter/widgets/MouseRegion-class.html) onEnter, onExit" — Scratte, Apr 19 '21 at 07:44

score 127 · Answer 1 · edited Nov 01 '20 at 14:19

127

In addtion you can use Focus widget.

Focus(
  child: TextFormField(...),
  onFocusChange: (hasFocus) {
    if(hasFocus) {
      // do stuff
    }
  },
)

edited Nov 01 '20 at 14:19

GoodSp33d

6,202
4
32
67

answered Apr 21 '20 at 15:53

BambinoUA

4,295
3
28
39

11

Certainly cleaner than having to set up and maintain a `FocusNode` instance. And for this post there is a proper example. Seems this could be the accepted answer now. Nice, Thanks – Gene Bo May 21 '20 at 22:45
6

This doesn't fire if you tap back. – TimSim Jul 11 '20 at 18:53
@TimSim It did when I tested it (with both TextFormField and TextField). – Andy King Jul 15 '20 at 16:19
5

this guy is great – jksevend Jul 25 '20 at 15:48
2

I second this statement – Jelani Thompson Jul 26 '20 at 04:12
2

this should be marked the answer. Worked easily and instantly. – Eradicatore Feb 15 '21 at 19:43
1

This is the best solution! – NaKib Feb 18 '21 at 12:26
1

It's definitely cleaner but depends on the use case. If we have more than one input field maintaining a focus node for each would be better. – Hassan Hammad Aug 24 '21 at 02:18
Almost a must if you're working with blocs and re-usable widgets! – nyphur Nov 21 '21 at 15:43

Albert221 · Answer 2 · 2021-01-05T11:27:49.437

Using `FocusNode`

Here is a fully correct answer. addListener shall be in initState(), not build(), because that would result in adding a listener every time a widget is built and you most likely don't want that.

import 'package:flutter/material.dart';

class SomeWidget extends StatefulWidget {
  @override
  _SomeWidgetState createState() => _SomeWidgetState();
}

class _SomeWidgetState extends State<SomeWidget> {
  final _focusNode = FocusNode();
    
  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      print("Has focus: ${_focusNode.hasFocus}");
    });
  }
    
  @override
  Widget build(BuildContext context) {
    return TextField(focusNode: _focusNode);
  }
    
  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }
}

Using `flutter_hooks` package

If you're by any chance using the flutter_hooks package, there is a dedicated useFocusNode hook.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class SomeWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final focusNode = useFocusNode();
    useEffect(() {
      focusNode.addListener(() {
        print("Has focus: ${focusNode.hasFocus}");
      });
      return; // You need this return if you have missing_return lint
    }, [focusNode]);

    return TextField(focusNode: focusNode);
  }
}

Thanks @Albert221, I was going through this problem of receiving multiple calls, now I managed to solve. — Luan Martins Gepfrie, Jul 26 '19 at 12:25
*Note:* a node focus listener is called twice: when it acquires focus and when it loses the focus. Inside the callback `node.hasFocus` would be `true` or `false` respectively — Kirill Karmazin, Dec 09 '19 at 12:09

score 36 · Accepted Answer · edited Jul 23 '21 at 07:28

36

I suppose you are looking for FocusNode class. Use addListener method to add a listener function that listens to focus change.

Example
declare and define FocusNode

 var focusNode = FocusNode();
  @override
  void initState() {
    focusNode.addListener(() {
      print(focusNode.hasFocus);
    });
    super.initState();
  }

Use focus node in textfield

TextField(
            focusNode: focusNode,
          ),

Output

when textfield is focus you will get true else false

edited Jul 23 '21 at 07:28

codingwithtashi

1,431
1
16
25

answered Dec 25 '17 at 16:37

Hemanth Raj

28,663
8
86
76

16

Can you provide an example please – Stephane Mar 23 '18 at 11:55
2

An example please – Sundeep Pidugu Mar 10 '19 at 02:33
without example, answer is USELESS – Kamlesh Sep 06 '21 at 08:10

How to listen focus change in flutter?

3 Answers3

Using `FocusNode`

Using `flutter_hooks` package

Linked

How to listen focus change in flutter?

3 Answers3

Using FocusNode

Using flutter_hooks package

Linked

Using `FocusNode`

Using `flutter_hooks` package