GestureDetector onTapDown/onTapUp/onTapCancel multiple callbacks when two are on top of each other

I am not sure if this is an expected behavior, but when two or more GestureDetector are placed on top of each other same as the image below.

The behavior is as follows:

[✔] onTapDown square 1 calls tap down square 1
[✔] onTapUp square 1 calls tap up square 1 & tapped square 1
[✔] onTapCancel square 1 calls tap cancel square 1

[X] onTapDown square 2 calls tap down square 2 & tap down square 1
[X] onTapUp square 2 calls tap up square 2 & tapped square 2 & tapped cancel square 1
[X] onTapCancel square 1 calls tap cancel square 2 & tap cancel square 1

while 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 FlatButton placed on top of each other results in the Ripple Effect/Inkwell/Splash Effect to be created in both Flat buttons, which is not an expected behaviour.

is there any way to bypass callbacks on parent FlatButton of child FlatButton was tapped down?

gist: https://gist.github.com/ebeem/1c331c1606fe9132b70def187a3086e1

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.5.5-pre.44, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] Android Studio (version 3.1)
[✓] Android Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] IntelliJ IDEA Ultimate Edition (version 2018.1)
[✓] Connected devices (1 available)

• No issues found!
flutter doctor  6.07s user 0.46s system 122% cpu 5.342 total

Please add the output of flutter doctor

added

@ebeem

@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

@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 between

to summarize, onTap is not a problem, the problem is onTapDown, onTapUp mainly

@zoechi

@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?

@faob-dev

thank god I am not alone in this
@faob-dev sorry friend, I already investigated this ...
we need to make some changes in the GestureDetector to 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

@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

I 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.
Thanks

Have you tried setting the behavior on the inner GestureDetector to HitTestBehavior.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 GestureDetector to HitTestBehavior.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

@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?

I 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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

GestureDetector onTapDown/onTapUp/onTapCancel multiple callbacks when two are on top of each other #18561

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

GestureDetector onTapDown/onTapUp/onTapCancel multiple callbacks when two are on top of each other #18561

Description

Activity

zoechi commented on Jun 18, 2018

ebeem commented on Jun 18, 2018

dimityrivanov commented on Jun 18, 2018

ebeem commented on Jun 18, 2018

dimityrivanov commented on Jun 18, 2018

ebeem commented on Jun 18, 2018

faob-dev commented on Aug 1, 2018

ebeem commented on Aug 1, 2018

faob-dev commented on Aug 1, 2018

miguelcmedeiros commented on Nov 22, 2018

ebeem commented on Nov 23, 2018

dannyvalentesonos commented on Feb 8, 2019

shinayser commented on Feb 18, 2019

no-response commented on May 14, 2019

miguelcmedeiros commented on May 15, 2019

R12-cookies commented on Nov 10, 2020

github-actions commented on Aug 9, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions