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,
                    ),
                  ),
                )
              ],
            ),
          )
        );
    }

Answer 1

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.