GestureDetector.onTap is ignored after scaling activity

[osaxma]

Steps to reproduce

To reproduce using the sample code below (for scaling, I used MacOS trackpard):

1. Tap on the view (should print onTap)
2. Zoom in and Zoom out using two fingers multiple times (see screen recording)
3. Tap on the view (it would print onScale)
   • if that does not happen, repeat step 2 and zoom in then out to the max.

Screen.Recording.2023-12-29.at.11.34.17.AM.mov

Expected results

I expect GestureDetector.onTap to be invoked for taps on the widget.

Actual results

Tapping on the widget after scaling invokes onScale... instead of GestureDetector.onTap.

Code sample

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ScaleTapIssue(),
        ),
      ),
    ),
  );
}

class ScaleTapIssue extends StatefulWidget {
  const ScaleTapIssue({
    Key? key,
  }) : super(key: key);

  @override
  State<ScaleTapIssue> createState() => _ScaleTapIssueState();
}

class _ScaleTapIssueState extends State<ScaleTapIssue> {
  var scale = 1.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('onTap');
      },
      onScaleUpdate: (details) {
        // to avoid printing all events
        if (details.scale == 1.0) {
          print('onScale');
        } else {
          final newScale = scale - ((1 - details.scale) * 0.2);
          if (newScale >= 0.1 && newScale <= 4.0) {
            setState(() {
              scale = newScale;
            });
          }
        }
      },
      child: Center(
        child: Container(
          color: Colors.yellow.shade200,
          height: 500,
          width: 500,
          child: ClipRect(
            clipBehavior: Clip.hardEdge,
            child: Transform.scale(
              scale: scale,
              child: Center(
                child: Container(
                  color: Colors.red,
                  height: 50,
                  width: 50,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.5, on macOS 12.7 21G816 darwin-x64, locale en)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.85.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.

---

Additional Details:
I have previously filed the following issue for InteractiveViewer, and I believe this new issue is its root cause or closer to it:

• InteractiveViewer blocks Gestures after zooming activity #136622

p.s. I would like to mention that GestureDetector.onScale has few other unexpected behaviors such as the conflict with onPan and the treatment of "single finger scroll" as a scaling event. Here are some issues that I ran into while working with scaling and other gestures:

• How to use scale gesture recognizer instead of pan recognizer #115061
• single finger scale gesture #13102
• Conflict between scale and drag gesture #13101

[osaxma]

I just realized if GestureDetector.onTap is not provided, then all tap events invokes GestureDetector.onScale....

So I think the issue above is that after scaling activity, the .onTap never wins the gesture. But according to .onTap documentation, .onTapCancel is supposed to be called, but this does not happen:

  /// This triggers when the tap gesture wins. If the tap gesture did not win,
  /// [onTapCancel] is called instead.

[moffatman]

Thanks for finding this, there was a mistake in my macOS side trackpad gesture handling. So in certain cases it would not send the final PanZoomEnd event. Then the ScaleGestureRecognizer would be stuck "accepted" until the user alt-tabbed. That's why it always claimed the subsequent tap instead of the onTap.

Fix is here flutter/engine#49424

[osaxma]

Thanks @moffatman for taking care of it 🙏🏽

A side question please:

Given that I cannot use GestureDetector.onPan with GestureDetector.onScale, how can I distinguish between a scroll and a drag in GestureDetector.onScaleUpdate? I noticed that the ScaleUpdateDetails.pointerCount does not report the fingers correctly (it's always 1) so that didn't help. I was hoping to use pointerCount to treat 1-finger as drag and 2-fingers as scale/scroll.

[moffatman]

Why do you need to treat them differently? Actually it's possible to both scale and pan at the same time. Just want some more info on your use case and I can give you advice.

[osaxma]

I am building a grid based application (think flow charts for simplicity).

I would like to keep two finger scrolling for moving the grid around (similar to InteractiveViewer).

On the other hand, I would like to use one finger drag to draw a selection box. For a concrete example, I am trying to achieve a similar behavior to that of https://excalidraw.com/ (scroll moves around, drag draws a selection box)

[moffatman]

Two finger scroll should have different pointerdevicekind (.trackpad)

[osaxma]

Both ScaleStartDetails and ScaleUpdateDetails do not have a PointeDdeviceKind. (Sorry, I forgot to mention that I am also using pinching to zoom, hence I am relying on GestureDetector.onScale..).

[moffatman]

Hmm.... I guess the problem is too that you can have combined trackpad+touch (technically). So maybe the best thing is to change pointerCount for trackpad to 2 instead of 1. Then you should always be able to tell them apart?

[osaxma]

so that would be:

• pointerCount == 1 --> single finger scroll (drag) in my case
• pointerCount == 2 --> two finger scroll in my case

I think that would work as long as they can be distinguished.

[moffatman]

Will look at making that change... however you may have more problems. Because remember every two finger drag starts with one finger... what happens when we go from 1 to 2.

[osaxma]

Will look at making that change..

Thanks a lot!

what happens when we go from 1 to 2.

I guess I will have to capture this info in onScaleUpdate and react upon it. InteractiveViewer does a similar thing where it differentiate between the different gesture types within onScaleUpdate. I will have to wait and see how that will turn out though 😅