To build a Progression UI I’m using a SliverList containing tiles.
Those tiles are make of a Stack to build the clickable tile itself and if it’s the current tile an animated floating bubble to emphasize the call to action (which should be clickable as well).
In order to display correctly my floating bubble, it’s part of the Stack. The floating buble itself is a Positioned widget with the attribute top: -50.
Similar code:
class ProgressTile extends StatelessWidget {
const ProgressTile({super.key});
@override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none,
children: [
Row(
children: [
Spacer(flex: leftFlex),
GestureDetector(
onTap: onTap,
child: Image.asset(
assetName,
)
),
Spacer(flex: rightFlex),
],
),
// This floatingTile gestureDetector is not triggered
if (isCurrentTile) floatingTile!,
],
);
}
}
Here is a screenshot to help you visualize :
The problem is, I can’t seem to be able to click on the floating bubble since it is outside the tile bounds, no event is triggered. I think I’m missing a piece of theory on how it works under the hood 
Is there a workaround to include it in the hit behavior ?
Would you have gone another approach to build such an UI ?
