Propagate click behind a widget

972

I have a sample code with which you can achieve this:

​class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 800,
          width: 400,
          child: Stack(
            children: [
              /// 2. ... and trigger the onTap function of this widget (WIDGET_2)
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  print('TAP BOTTOM');
                },
                child: Container(
                  height: 500,
                  width: 400,
                  color: Colors.deepOrange,
                ),
              ),
              /// Able to tap bottom
              IgnorePointer(
                ignoring: true,
                child: Container(
                  height: 300,
                  width: 400,
                  color: Colors.deepPurple,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Also sorry for posting late here.

Share:
972
Herinn
Author by

Herinn

Enough that now thou wilt not fail to listen to my developper issues

Updated on December 27, 2022

Comments

  • Herinn
    Herinn over 1 year

    I have a Stack with two widgets inside. I'm trying to detect the click on the bottom widget of the Stack, which is behind the top one.

    I am using HitTestBehavior.translucent, but it only work if the GestureDetector doesn't have any child.

    This is a simplified version of what i need in my app. I have a Stack which contains many tiny Cards on the screen, and there's one canvas on top of them all. Despite the canvas, I need to be able to tap on the Cards to change its content. I thought using a translucent behavior would solve my problem but it does not.

    EDIT : Also, the first GestureDetector will always be in a Positioned widget.

    class TestPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: SizedBox(
              height: 800,
              width: 400,
              child: Stack(
                children: [
                  /// 2. ... and trigger the onTap function of this widget
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      print('TAP BOTTOM');
                    },
                    child: Container(
                      height: 500,
                      width: 400,
                      color: Colors.deepOrange,
                    ),
                  ),
                  /// 1. I'm Trying to clic here...
                  GestureDetector(
                    behavior: HitTestBehavior.translucent,
                    onTap: null,
                    child: Container(
                      height: 300,
                      width: 400,
                      color: Colors.deepPurple,
                    ),
                  ),
                ],
              ),
            ),
            // ),
          ),
        );
      }
    }