Repository navigation
GestureDetector onTapDown/onTapUp/onTapCancel multiple callbacks when two are on top of each other #18561
Description
Activity
Please add the output of
flutter doctoradded
Reacted by Günter Zöchbauer@ebeem If you make the containers to hold the GestureDetector does this solve the problem ?
@mitko9000
I think it will, but how will I be able to tell if the inner square was clicked?
and in case a FlatButton is used, this option will be a very difficult one@ebeem What is the output of onTap ?
@mitko9000 I am not sure what do you mean
onTap is an event that's handled by the developers, you decide whether you want to have an output or not.
if what you mean is the output when you have a Container with GestureDetector, then you will trigger onTap when the Container is tapped.
if you mean the output if you have a GestureDetector on two different containers on top of each other, then it's the same as the issue above, because the GestureDetector seems not to check if there is another GestureDetector that was triggered at same tapped point, so any Container with a GestureDetector will trigger tap if the tapped point is inside the borders of the Container, whether it's on top, bottom, or betweento summarize, onTap is not a problem, the problem is onTapDown, onTapUp mainly
@zoechi I am also facing same issue but with onTapDown when i click on white child container parent onTapDown also gets called see screenshot
void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: GestureDetector( onTap: () { print("parent tap = ${DateTime.now()}"); }, onTapUp: (TapUpDetails details) { print("parent tapup = ${DateTime.now()}"); }, onTapDown: (TapDownDetails details) { print("parent tapdown = ${DateTime.now()}"); }, child: Container( color: Colors.teal, alignment: Alignment.center, child: GestureDetector( onTap: () { print("child tap = ${DateTime.now()}"); }, onTapUp: (TapUpDetails details) { print("child tapup = ${DateTime.now()}"); }, onTapDown: (TapDownDetails details) { print("child tapdown = ${DateTime.now()}"); }, child: Container( width: 350.0, height: 200.0, color: Colors.white, ), ), ), )); } }
flutter doctor logs
Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel dev, v0.5.7, on Microsoft Windows [Version 10.0.17134.165], locale en-PK) [√] Android toolchain - develop for Android devices (Android SDK 28.0.1) [√] Android Studio (version 3.2) X Flutter plugin not installed; this adds Flutter specific functionality. X Dart plugin not installed; this adds Dart specific functionality. [√] VS Code, 64-bit edition (version 1.25.1) [√] Connected devices (1 available) • No issues found!Is there any solution to prevent parent onTapDown call?
thank god I am not alone in this
@faob-dev sorry friend, I already investigated this ...
we need to make some changes in theGestureDetectorto make it work. The problem is, no one knows whether this is the expected behavior or not, and whether fixing this will break some existing apps or not, that's the main reason why I created this issue.Sadly, I don't know someone who can answer this, all I know is that this is not the behavior in Android Material implementation, and there are a couple of people like you and me who do not see this as an expected behavior.
please cc anyone who can help us, thanks.
@ebeem i wasted so much time on that i guess this is not expected behavior this should be fixed and i am surprised no one from flutter community replying on that issue at least they should tell us is this expected behavior or not
Reacted by Ebeem, agreyfox and KoridevI am also having this issue. Any update?
I think this issue should get more attention
also, we need a confirmation whether this behavior is intentional or not, if it's not intentional I might put some time trying to solve it. I hope the stackoverflow label gets removed because it does not make any sense.
ThanksHave you tried setting the behavior on the inner
GestureDetectortoHitTestBehavior.opaque?HitTestBehavior.opaque:
/// Opaque targets can be hit by hit tests, causing them to both receive /// events within their bounds and prevent targets visually behind them from /// also receiving events.Have you tried setting the behavior on the inner
GestureDetectortoHitTestBehavior.opaque?HitTestBehavior.opaque:
/// Opaque targets can be hit by hit tests, causing them to both receive /// events within their bounds and prevent targets visually behind them from /// also receiving events.I just tested here and it does't work for my case wich is very similar the this one posted here.
Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.@zoechi, the no-response bot just closed this issue, perhaps due to "waiting for customer response" label, but since @shinayser replied to the previous proposal and mentioned that it didn't solve the problem, the label is not valid anymore.
Since this is a problem that I have on my app, can you please re-open it?
Reacted by Michael Dudek, Ebeem, Murat Yilmaz, Koridev, Rory Stephenson, Bjarne Handeland, Eduard Hasa, Zhuoran (John) Li and R12-cookiesI am also facing the same issue, waiting for updates.
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Aug 9, 2021
I am not sure if this is an expected behavior, but when two or more
GestureDetectorare placed on top of each other same as the image below.The behavior is as follows:
[✔] onTapDown
square 1calls tap downsquare 1[✔] onTapUp
square 1calls tap upsquare 1& tappedsquare 1[✔] onTapCancel
square 1calls tap cancelsquare 1[X] onTapDown
square 2calls tap downsquare 2& tap downsquare 1[X] onTapUp
square 2calls tap upsquare 2& tappedsquare 2& tapped cancelsquare 1[X] onTapCancel
square 1calls tap cancelsquare 2& tap cancelsquare 1while this can be an expected behavior at the same time, since tapping square 2 does not tap square 1 after all, and all the other tap callbacks will just provide more details, having two
FlatButtonplaced on top of each other results in theRipple Effect/Inkwell/Splash Effectto be created in both Flat buttons, which is not an expected behaviour.is there any way to bypass callbacks on parent
FlatButtonof childFlatButtonwas tapped down?gist: https://gist.github.com/ebeem/1c331c1606fe9132b70def187a3086e1
flutter doctor