Absorb Pointer VS Ignore Pointer
Ignore pointer and absorb pointer are both used to prevent users from clickable events. if there are Button, ListTile, Container, etc., and you want to stop interaction from the user from all of the widgets. here you use ignore pointer and absorb pointer.
Absorb Pointer and Ignore Pointer
Absorb Pointer
Absorb Pointer disable click event from his child widget. and not only click event scroll drag and hover
also. it has property absorb when you set true in absorb property it makes his child widget non-clickable.
Ignore Pointer
Ignore Pointer ignores/prevents their children's widget from tapping event as well as the complete widget tree interaction. Ignore can ignore tapping events from tapping, scrolling, and hovering. Ignore
pointer as ignore property that set as default true value.
Difference between Absorb Pointer and Ignore Pointer
Example:
Take two containers yellow container and a green container. The yellow container is on top of the green container in a stack widget.
Stack(
alignment: Alignment.center,
children: [
ElevatedButton(
onPressed: (){print("green box clicked");},
child:Container(
child:const SizedBox(width: 200, height: 200),
color: Colors.green,
),
), ElevatedButton(
onPressed: (){print("yellow box clicked");},
child:Container(
child:const SizedBox(width: 100, height: 100),
color: Colors.yellow,
),
)
],
);
Both buttons are working with their individual property.
Now we wrap the yellow container into the Absorb Pointer.
Stack(
alignment: Alignment.center,
children: [
ElevatedButton(
onPressed: (){print("green box clicked");},
child:Container(
child:const SizedBox(width: 200, height: 200),
color: Colors.green,
),
),
AbsorbPointer(
child: ElevatedButton(
onPressed: (){print("yellow box clicked");},
child:Container(
child:const SizedBox(width: 100, height: 100),
color: Colors.yellow,
),
),
)
],
);
as we see that the yellow container does not show click event.
Absorb pointer ignoring the interaction of the child and widget below it like green container also not show click event.
Now wrap the same yellow container into Ignore Pointer.
Stack(
alignment: Alignment.center,
children: [
ElevatedButton(
onPressed: (){print("green box clicked");},
child:Container(
child:const SizedBox(width: 200, height: 200),
color: Colors.green,
),
),
IgnorePointer(
child: ElevatedButton(
onPressed: (){print("yellow box clicked");},
child:Container(
child:const SizedBox(width: 100, height: 100),
color: Colors.yellow,
),
),
)
],
);
as we see yellow container does not get a click event. but click on the yellow container the green container will be clicked.
In the end, we know that:
Absorb pointer prevents click event from widget and widget below it.
Ignore Pointer is also ignoring the interaction with the widget but it does not ignore the widget below it.