How to delegate ontap event in flutter to bottom widget in stack? - flutter

Question

If two containers completely overlap each other in stack then how do we detect onTap() event on bottom when widget at top is clicked?
Use Case:
My top container is transparent. I am using this transparent container tap to animate top widgets (this top widget sticks at the bottom of the sceen). And on tap I want to animate same bottom element at position.
Additianly I implemented custom Rawgesture but i don't see gesture arena conflicts. This arena conflicts are only detected if elements are positioned such that one is parent and second is child.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(children: <Widget>[
GestureDetector(
onTap: () {
print('green clicked.');
},
child: Container(
color: Colors.green,
width: 400,
height: 400,
),
),
GestureDetector(
onTap: () {
print('red clicked.');
},
child: Container(
color: Colors.red,
width: 200,
height: 200,
),
),
]),
);
}
}
In this above example When I click on red container it will print red clicked but there is some part of green container is also present. I want to know if both events can be called?
Thanks.

Answer 1

AFAIK, there is no direct way to know if there is an underlying widget where user has tapped. However, I ran your code of red and green containers and achieved it with onTapDown event
Simplest solution (without onTapDown) ::
Added a following function :
void onGreenClick()
{
print("Green clicked");
}
Changed Green's onTap handler as :
onTap: onGreenClick,
And added onGreenClick() in Red's onTap as :
onTap: () {
print('red clicked.');
onGreenClick();
},
However, as you guess this will work only when the widgets are completely overlap on each other. In case, there's some area where red container is present but not green then above would fail. To, achieve that, you use onTapDown as below :
Add onTapDown handler to both red and green (under GestureDetector) as :
onTapDown: (TapDownDetails details) => onTapDown(context, details),
where the handler function is :
void onTapDown(BuildContext context, TapDownDetails details) {
print('${details.globalPosition}');
final RenderBox box = context.findRenderObject();
final Offset localOffset = box.globalToLocal(details.globalPosition);
setState(() {
posx = localOffset.dx;
posy = localOffset.dy;
});
if (posx < 100.0 && posy < 100.0) onGreenClick();
}
Now, if you see the last line, we call onGreenClick only on the specific x,y-coordinates.
Thus the end result is you get "Green click" in the debug output window even on clicking on red.
The entire code is available here