AbsorbPointer is a built-in widget in flutter which absorbs pointer, in other words, it prevents its subtree from being clicked, tapped, scrolled, dragged, and responding to hover.
IgnorePointer is a built-in widget in flutter which is similar to the AbsorbPointer widget, they both prevent their children's widget from pointer-events which are taping, clicking, dragging, scrolling, and hover.
IgnorePointer is a built-in widget that prevents their children's widget from pointer-events like tapping, dragging, scrolling, and hover. This widget ignores the pointer-events without terminating them.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With