Gesture Detector Precedence

Viewed 317

I have a stack containing a GestureDetector (which is the up-most layer and spans across the whole screen) and another widget (under it) that eventually has a ListView. The problem is that the global GestureDetector uses onHorizontalDrag which consumes the touch event. Instead, I want the ListView to consume that event only.

In short, is there a way to make the ListView take precedence over the GestureDetector without keeping some sort of a state? Note, the ListView is not a child/sub-child of the GestureDetector - they are on different branches within the widget tree.

2 Answers

I try out a stack with two GestureDetectors. It gives the highest preference to the GestureDetector which is placed last in the stack.

Example:

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDetector(
          onTap: () => {
            print("gesture detector1 event fired"),
          },
          child: Container(
            color: Colors.red,
            height: 600,
            width: 400,
          ),
        ),
        GestureDetector(
          onTap: () => {
            print("gesture detector2 event fired"),
          },
          child: Container(
            color: Colors.blue,
            height: 200,
            width: 400,
          ),
        ),
      ],
    );
  }

When you click on the blue color container "Gesture Detector 2 is fired", you click on the red color container then "Gesture Detector 1 is fired" Refer this image

try adding behavior: HitTestBehavoir.translucent or HitTestBehavoir.deferToChild to the gestureture detector.

Related