How to absorb the pointer interaction by inner widget conditionally in flutter?

Question

I have a stack, where ("canvas") is a widget that fills the stack and all other widgets ("elements") are above it. I want when the user presses an element, to select it (using a BLoC event), and in this state, if he taps anywhere on the element or canvas I want to deselect it (also by BLoC event).

I tried putting a gesture detector wrapping the canvas and gesture detector wrapping the element at the same time, but when I tap the element both detectors are invoked so non-deterministic behaviour is happening.

How can I achieve what I want: in unselected state tapping an element will select it and tapping on canvas does nothing / in selected state tapping anywhere deselects ?

I mean is there an easier and shorter way than calculating the coordinates of a tap event and check if they are inside the element or outside it i.e. in the canvas?

Answer 1

You can use the IgnorePointer widget when no element is selected, that way only the element GestureDetector is fired.