Search code examples
flutterdartstackgesturedetector

Flutter GestureDetector click Issue - Button Outside Stack Not Clickable

I have a Flutter app where I'm trying to create an animated button interaction. When I click the first button, a second button should slide in from the left under the first button. The animation works as expected, but the problem is that the second button, when partially outside the Stack, is not clickable. Pls refer to this gif for better understanding.

enter image description here

The minor area near the white rectangle(near top right and bottom right corners) is clickable because it is not outside the stack. You can use this working example on DartPad.

I'm using Stack with clipBehavior set to Clip.none to allow the button to overflow the Stack. I've tried GestureDetector behavior to HitTestBehavior.translucent However, the area outside the Stack where the second button appears is not responsive to touch events.

I would like to make the second button clickable even when it's outside the Stack. How can I achieve this behavior? Any guidance or suggestions would be greatly appreciated.

Solution

  • I'm not sure if this works in your case, because you work with animations here, but it should be the same:

    Stack works with a RenderBox, which checks if the click is not outside the bounds of the stack.

    Use the DeferPointer widget https://pub.dev/packages/defer_pointer

    Typically in Flutter, if you offset a widget outside of it's parent bounds hit-testing will break. DeferPointer works around this issue by handing off hit-testing and (optionally) rendering to an DeferredPointerHandler widget further up the tree.