I am trying to create a multi layered screen using a stack which allows the user to interact with both the foreground and background widgets.
I have started a basic outline for the screen however even when using HitTestBehavior.translucent the console only prints red pressed when pressing the translucent red container. I would like for console to print both strings when red/purple container is pressed.
Below is the code I used.
@override
Widget build(BuildContext context) {
final children = <Widget>[
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
debugPrint('blue pressed');
},
child: Container(
height: 500,
width: MediaQuery.of(context).size.width,
color: Colors.blue,
),
),
];
if (exercise.instructions.isNotEmpty) {
children.add(
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
debugPrint('red pressed');
},
child: Container(
height: 400,
width: MediaQuery.of(context).size.width,
color: Colors.red.withAlpha(100),
),
),
);
}
return Stack(
alignment: Alignment.bottomCenter,
children: children,
);
}
Below is the screen produced:
