Question:

A Stack contains MyWidget inside of a Positioned.

Stack( overflow: Overflow.visible, children: [ Positioned( top: 0.0, left: 0.0, child: MyWidget(), )], );

Since overflow is Overflow.visible and MyWidget is larger than the Stack, it displays outside of the Stack, which is what I want.

However, I can't tap in the area of MyWidget which is outside of the Stack area. It simply ignores the tap there.

How can I make sure MyWidget accepts gestures there?

Ok, I did a workaround about this, basically I added a GestureDetector on the parent and implemented the onTapDown. Also you have to keep track your Widget using GlobalKey to get the current position.

When the Tap at the parent level is detected check if the tap position is inside your widget.

The code below:

final GlobalKey key = new GlobalKey(); void onTapDown(BuildContext context, TapDownDetails details) { final RenderBox box = context.findRenderObject(); final Offset localOffset = box.globalToLocal(details.globalPosition); final RenderBox containerBox = key.currentContext.findRenderObject(); final Offset containerOffset = containerBox.localToGlobal(localOffset); final onTap = containerBox.paintBounds.contains(containerOffset); if (onTap){ print("DO YOUR STUFF..."); } } @override Widget build(BuildContext context) { return GestureDetector( onTapDown: (TapDownDetails details) => onTapDown(context, details), child: Container( color: Colors.red, width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: Align( alignment: Alignment.topLeft, child: SizedBox( width: 200.0, height: 400.0, child: Container( color: Colors.black, child: Stack( overflow: Overflow.visible, children: [ Positioned( top: 0.0, left: 0.0, child: Container( key: key, width: 500.0, height: 200.0, color: Colors.blue, ), ), ], ), ), ), ), ), ); }

I had a similar issue. Basically since the stack's children don't use the fully overflown box size for their hit testing, i used a nested stack and an arbitrary big height so that i can capture the clicks of the nested stack's overflown boxes. Not sure if it can work for you but here goes nothing :)

So in your example maybe you could try something like that

Stack( overflow: Overflow.visible, children: [ Positioned( top: 0.0, left: 0.0, height : 500.0 // biggest possible child size or just very big child: Stack( children: [MyWidget()] ), )], );