72

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.

3

1 Answer 1

134

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.

5
  • Interesting, but has anyone needed this distinction? Jun 12, 2020 at 8:40
  • 17
    Interesting. Could you replace the documentation for these widgets with this short answer? Jul 7, 2020 at 1: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. Sep 12, 2020 at 6: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? Oct 28, 2020 at 19:55
  • tks bro, my brain just rescued!!! Nov 28, 2022 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.