Flutter AbsorbPointer vs IgnorePointer difference

Question

What is the difference between AbsorbPointer and IgnorePointer in flutter?

Docs mention:

AbsorbPointer prevents its subtree from receiving pointer events by terminating hit testing at itself.

IgnorePointer, which also prevents its children from receiving pointer events but is itself invisible to hit testing.

I didn't get what is the real life difference between the two.

https://stackoverflow.com/questions/50600747/flutter-ignore-touch-events-on-a-widget — Kartik Shandilya, Mar 30 '19 at 11:33
Possible duplicate of [Flutter: Ignore touch events on a Widget](https://stackoverflow.com/questions/50600747/flutter-ignore-touch-events-on-a-widget) — creativecreatorormaybenot, Apr 03 '19 at 08:19

score 96 · Accepted Answer · edited Aug 21 '20 at 06:52

96

The difference is when we have two widgets overlapping each other, that can both receive clicks.

Consider a red and blue square, both clickable, where the blue square is smaller and on the top of the red square:

Stack(
  alignment: Alignment.center,
  children: [
     Container(color: Colors.red),
     Container(width: 42, height: 42, color: Colors.blue),
  ],
)

By default, without IgnorePointer/AbsorbPointer, tapping the blue square will send a click event on blue and red gets nothing.

In that situation, wrapping blue square into an AbsorbPointer means that when tapping the blue square, neither the blue square nor the red one gets the click event.

If we instead used an IgnorePointer, the red square would receive click events when tapping the blue square.

edited Aug 21 '20 at 06:52

Birju Vachhani

5,602
4
19
42

answered Mar 30 '19 at 11:36

Rémi Rousselet

216,050
72
473
395

Interesting, but has anyone needed this distinction? – Ben Butterworth Jun 12 '20 at 08:40
8

Interesting. Could you replace the documentation for these widgets with this short answer? – Andrey Chaschev Jul 07 '20 at 01:27
Actually in real life when you will come across some problems like, if you don't want the gestures in the maps or don't want any two-finger zoom or else, then you will need this. – Shîvam Yadav Sep 12 '20 at 06:23
It is really interesting but when I try to disable my click events on WebView using webview_flutter none of them works. Is anyone know why? – Code Runner Oct 28 '20 at 19:55

score 1 · Answer 2 · answered Dec 10 '20 at 04:05

The AbsorbPointer itself can receive the click event and consume the event, while the IgnorePointer cannot receive the click event, and the control under it can receive the click event (not the sub control).

If there are two boxes, a 200x200 red box and a 100x100 blue box, the blue box will be displayed in the middle above the red box, and click event will be added to the two boxes, as follows:

  return Container(
      height: 200,
      width: 200,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Listener(
            onPointerDown: (v) {
              print('click red');
            },
            child: Container(
              color: Colors.red,
            ),
          ),
          Listener(
            onPointerDown: (v) {
              print('click red');
            },
            child: Container(
              color: Colors.blue,
              width: 100,
              height: 100,
            ),
          ),
        ],
      ),
    );

When clicking on the blue box, print the result:

flutter: click blue

Click the red box outside the blue box area to print the result:

flutter: click red

Now wrap the blue box with AbsorbPointer:

return Container(
  height: 200,
  width: 200,
  child: Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Listener(
        onPointerDown: (v) {
          print('click red');
        },
        child: Container(
          color: Colors.red,
        ),
      ),
      Listener(
        onPointerDown: (v) {
          print('click blue self');
        },
        child: AbsorbPointer(
          child: Listener(
            onPointerDown: (v) {
              print('click blue child');
            },
            child: Container(
              color: Colors.blue,
              width: 100,
              height: 100,
            ),
          ),
        ),
      ),
    ],
  ),
);

Click the blue box and print as follows:

flutter: click blue self

It indicates that the AbsorbPointer itself has received the click event. Change the AbsorbPointer to IgnorePointer, and print as follows:

flutter: click red

Click event penetrates the blue box to the red box, and the red box receives the click event.

For more info, see https://programmer.help/blogs/the-difference-between-flutter-absorbpointer-and-ignorepointer.html

Flutter AbsorbPointer vs IgnorePointer difference

2 Answers2

Linked