Gesture response outside of stack boundary not recieved

Question

I am trying to implement a re-sizable widget with handles at the corners. The corner handles will be overflow the Stack by half of its width/height.

Issue: the outer part of handle does not report gesture events while the inner part is working fine.

It is intended or I am doing some thing wrong. If it is intended behavior then what to do next.

sample code

      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.green,
          body: Transform.translate(
            offset: boxOffset,
            child: Stack(
              overflow: Overflow.visible,
              fit: StackFit.expand,
              children: <Widget>[
                Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.red,
                ),
                Positioned(
                  left: 100.0 - 20.0,
                  top: 100.0 - 20.0,
                  child: GestureDetector(
                    onTap: () {print("tapped");},
                    child: Container(
                      width: 80.0,
                      height: 80.0,
                      color: Colors.blue,
                    ),
                  ),
                )
              ],
            ),
          )
        );
    }

Does this answer your question? [In Flutter, how can a positioned Widget feel taps outside of its parent Stack area?](https://stackoverflow.com/questions/51366761/in-flutter-how-can-a-positioned-widget-feel-taps-outside-of-its-parent-stack-ar) — Benno, May 29 '22 at 13:36

score 3 · Answer 1 · answered Jul 05 '18 at 10:03

3

This is the desired behavior. If widgets could catch pointer events outside of their boundaries; it would be easy to fall into a situation where it's impossible to determine which widget is targeted.

In short, don't use overflow. Refactor your layout to make sure it's well contained inside the bounds of its parent.

answered Jul 05 '18 at 10:03

Rémi Rousselet

256,336
79
519
432

2

"Refactor your layout to make sure it's well contained inside the bounds of its parent." What happens when you have widget A and widget B. You want widget A to slide down behind widget B and disappear when the user taps on widget A. You need a stack to do this. – AntonB Mar 08 '19 at 18:15
Using a Stack doesn't mean that there should be an overflow. – Rémi Rousselet Mar 08 '19 at 18:24
That's the exact use for a stack though, is to emulate Z-index and move an element independently of the other. – AntonB Mar 08 '19 at 18:34
1

These still don't imply an overflow. Overflow is almost never wanted in Flutter. – Rémi Rousselet Mar 08 '19 at 18:53
1

Can you provide an example without "overflow"? – AntonB Mar 08 '19 at 19:04
I am panning/zooming my Stack and without overflow.visible I'm unable to see the complete widget when I pan/zoom. I'm am also unable to detect a gesture on a widget outside the stack bounds for this slightly different use case. – dbarton_uk Jun 07 '19 at 17:01

score 0 · Answer 2 · answered Nov 01 '22 at 13:40

0

I was facing the same issue then found out about defer_pointer package. Hope this helps.

answered Nov 01 '22 at 13:40

Mohammad Awais

85
2
4

Gesture response outside of stack boundary not recieved

2 Answers2

Linked