In the nested GestureDetector, when the child onPanDown is triggered, how to prevent the parent onPanDown from being triggered?

Question

Below is the code so far.

Widget build(BuildContext context) {
    return GestureDetector(
      onPanDown: (details) {
        print("father");
      },
      child: Container(
        alignment: Alignment.center,
        color: Colors.red,
        width: 300,
        height: 300,
        child: GestureDetector(
          onPanDown: (details) {
            print("child");
          },
          child: Container(
            alignment: Alignment.center,
            color: Colors.blue,
            width: 100,
            height: 100,
            child: Text("data"),
          ),
        ),
      ),
    );
  }

The answers to this question will help. Your question is the same. Link - https://stackoverflow.com/questions/53231796/how-do-i-prevent-ontapdown-from-being-triggered-on-a-parent-widgets-gesturedetec — Jigar Patel, Aug 16 '20 at 08:04

score 0 · Answer 1 · answered Aug 16 '20 at 07:51

You can use a Stack widget as a parent to the containers.

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        GestureDetector(
          onPanDown: (details) {
            print("father");
          },
          child: Container(
            alignment: Alignment.center,
            color: Colors.red,
            width: 300,
            height: 300,
          ),
        ),
        GestureDetector(
          onPanDown: (details) {
            print("child");
          },
          child: Container(
            alignment: Alignment.center,
            color: Colors.blue,
            width: 100,
            height: 100,
            child: Text("data"),
          ),
        ),
      ],
    );
  }

For further reading.

In the nested GestureDetector, when the child onPanDown is triggered, how to prevent the parent onPanDown from being triggered?

1 Answers1