Propagate click behind a widget
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.
Herinn
Enough that now thou wilt not fail to listen to my developper issues
Updated on December 27, 2022Comments
-
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 theGestureDetector
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 aPositioned
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, ), ), ], ), ), // ), ), ); } }