How to make a GestureDetector capture taps inside a Stack?

Question

I'm trying to make a GestureDetector work inside a Stack with a Container on top of it but the onTap callback is never called.

As you can see, it doesn't work even with HitTestBehavior.translucent

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: () {
                print('tap');
              },
              child: Container(color: Colors.blue),
            ),
            Container(color: Colors.white),
          ],
        ),
      ),
    );
  }

I know that it can be strange that I would want to capture tap event below another Widget but in my real case, the widget on top is transparent and sometimes has a gradient.

Answer 1

Ok guys, I think I found a solution myself. I hope that there exist a simpler solution but it works for my use. The problem I had was that the Stack widget doesn't pass the hit test to all children but only the first one that is hit. What I did is that I rewrote the hit detection algorithm used by the Stack's RenderBox. I really didn't intended to go this far and I'm still waiting for a better answer. Here is my code, use it at your own risk :

class CustomStack extends Stack {
  CustomStack({children}) : super(children: children);

  @override
  CustomRenderStack createRenderObject(BuildContext context) {
    return CustomRenderStack(
      alignment: alignment,
      textDirection: textDirection ?? Directionality.of(context),
      fit: fit,
      overflow: overflow,
    );
  }
}

class CustomRenderStack extends RenderStack {
  CustomRenderStack({alignment, textDirection, fit, overflow})
      : super(
            alignment: alignment,
            textDirection: textDirection,
            fit: fit,
            overflow: overflow);

  @override
  bool hitTestChildren(BoxHitTestResult result, {Offset position}) {
    var stackHit = false;

    final children = getChildrenAsList();

    for (var child in children) {
      final StackParentData childParentData = child.parentData;

      final childHit = result.addWithPaintOffset(
        offset: childParentData.offset,
        position: position,
        hitTest: (BoxHitTestResult result, Offset transformed) {
          assert(transformed == position - childParentData.offset);
          return child.hitTest(result, position: transformed);
        },
      );

      if (childHit) stackHit = true;
    }

    return stackHit;
  }
}