add minTaps argument to BaseTapAndDragGestureRecognizer and TapAndPanGestureRecognizer #164922

yakagami · 2025-03-10T18:20:57Z

This adds a minTaps parameter to BaseTapAndDragGestureRecognizer and TapAndPanGestureRecognizer, allowing ScaleGestureRecognizer to resolve on single taps and TapAndPanGestureRecognizer to only win when there is a double tap first by setting minTaps to 2. See the related issue "Add double tap and pan/double tap and drag gesture (#164889)"

Closes #164889

Note: we should probably check that minTaps <= maxConsecutiveTap. Not sure where to check for that. I guess we would add setters for maxConsecutiveTap and minTaps and check there?

Before

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

/// Flutter code sample for [TapAndPanGestureRecognizer].

void main() {
  runApp(const TapAndDragToZoomApp());
}

class TapAndDragToZoomApp extends StatelessWidget {
  const TapAndDragToZoomApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: TapAndDragToZoomWidget(child: MyBoxWidget()))),
    );
  }
}

class MyBoxWidget extends StatelessWidget {
  const MyBoxWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blueAccent, height: 100.0, width: 100.0);
  }
}

// This widget will scale its child up when it detects a drag up, after a
// double tap/click. It will scale the widget down when it detects a drag down,
// after a double tap. Dragging down and then up after a double tap/click will
// zoom the child in/out. The scale of the child will be reset when the drag ends.
class TapAndDragToZoomWidget extends StatefulWidget {
  const TapAndDragToZoomWidget({super.key, required this.child});

  final Widget child;

  @override
  State<TapAndDragToZoomWidget> createState() => _TapAndDragToZoomWidgetState();
}

class _TapAndDragToZoomWidgetState extends State<TapAndDragToZoomWidget> {
  final double scaleMultiplier = -0.0001;
  double _currentScale = 1.0;
  Offset? _previousDragPosition;

  static double _keepScaleWithinBounds(double scale) {
    const double minScale = 0.1;
    const double maxScale = 30;
    if (scale <= 0) {
      return minScale;
    }
    if (scale >= 30) {
      return maxScale;
    }
    return scale;
  }

  void _zoomLogic(Offset currentDragPosition) {
    final double dx = (_previousDragPosition!.dx - currentDragPosition.dx).abs();
    final double dy = (_previousDragPosition!.dy - currentDragPosition.dy).abs();

    if (dx > dy) {
      // Ignore horizontal drags.
      _previousDragPosition = currentDragPosition;
      return;
    }

    if (currentDragPosition.dy < _previousDragPosition!.dy) {
      // Zoom out on drag up.
      setState(() {
        _currentScale += currentDragPosition.dy * scaleMultiplier;
        _currentScale = _keepScaleWithinBounds(_currentScale);
      });
    } else {
      // Zoom in on drag down.
      setState(() {
        _currentScale -= currentDragPosition.dy * scaleMultiplier;
        _currentScale = _keepScaleWithinBounds(_currentScale);
      });
    }
    _previousDragPosition = currentDragPosition;
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: <Type, GestureRecognizerFactory>{
        TapAndPanGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<TapAndPanGestureRecognizer>(
              () => TapAndPanGestureRecognizer( ),
              (TapAndPanGestureRecognizer instance) {
                instance
                  ..onTapDown = (TapDragDownDetails details) {
                    _previousDragPosition = details.globalPosition;
                  }
                  ..onDragStart = (TapDragStartDetails details) {
                      print("Drag Start");
                      _zoomLogic(details.globalPosition);
                  }
                  ..onDragUpdate = (TapDragUpdateDetails details) {
                      print("Drag Update");
                      _zoomLogic(details.globalPosition);
                  }
                  ..onDragEnd = (TapDragEndDetails details) {      
                    print("Drag End");              
                    setState(() {
                      _currentScale = 1.0;
                    });
                    _previousDragPosition = null;
                  };
              },
            ),
            //ScaleGestureRecognizer never wins the arena
            ScaleGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<ScaleGestureRecognizer>(
              () => ScaleGestureRecognizer(),
              (ScaleGestureRecognizer instance) {
                instance
                  ..onStart = (ScaleStartDetails details) {
                    print('Scale Start');
                  }
                  ..onUpdate = (ScaleUpdateDetails details) {
                    print('Scale Update');
                  }
                  ..onEnd = (ScaleEndDetails details) {
                    print('Scale End');
                  };
              },
            ),
      },
      child: Transform.scale(scale: _currentScale, child: widget.child),
    );
  }
}

After

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

/// Flutter code sample for [TapAndPanGestureRecognizer].

void main() {
  runApp(const TapAndDragToZoomApp());
}

class TapAndDragToZoomApp extends StatelessWidget {
  const TapAndDragToZoomApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: TapAndDragToZoomWidget(child: MyBoxWidget()))),
    );
  }
}

class MyBoxWidget extends StatelessWidget {
  const MyBoxWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blueAccent, height: 100.0, width: 100.0);
  }
}

// This widget will scale its child up when it detects a drag up, after a
// double tap/click. It will scale the widget down when it detects a drag down,
// after a double tap. Dragging down and then up after a double tap/click will
// zoom the child in/out. The scale of the child will be reset when the drag ends.
class TapAndDragToZoomWidget extends StatefulWidget {
  const TapAndDragToZoomWidget({super.key, required this.child});

  final Widget child;

  @override
  State<TapAndDragToZoomWidget> createState() => _TapAndDragToZoomWidgetState();
}

class _TapAndDragToZoomWidgetState extends State<TapAndDragToZoomWidget> {
  final double scaleMultiplier = -0.0001;
  double _currentScale = 1.0;
  Offset? _previousDragPosition;

  static double _keepScaleWithinBounds(double scale) {
    const double minScale = 0.1;
    const double maxScale = 30;
    if (scale <= 0) {
      return minScale;
    }
    if (scale >= 30) {
      return maxScale;
    }
    return scale;
  }

  void _zoomLogic(Offset currentDragPosition) {
    final double dx = (_previousDragPosition!.dx - currentDragPosition.dx).abs();
    final double dy = (_previousDragPosition!.dy - currentDragPosition.dy).abs();

    if (dx > dy) {
      // Ignore horizontal drags.
      _previousDragPosition = currentDragPosition;
      return;
    }

    if (currentDragPosition.dy < _previousDragPosition!.dy) {
      // Zoom out on drag up.
      setState(() {
        _currentScale += currentDragPosition.dy * scaleMultiplier;
        _currentScale = _keepScaleWithinBounds(_currentScale);
      });
    } else {
      // Zoom in on drag down.
      setState(() {
        _currentScale -= currentDragPosition.dy * scaleMultiplier;
        _currentScale = _keepScaleWithinBounds(_currentScale);
      });
    }
    _previousDragPosition = currentDragPosition;
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: <Type, GestureRecognizerFactory>{
        TapAndPanGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<TapAndPanGestureRecognizer>(
              () => TapAndPanGestureRecognizer(
                minTaps: 2,    //<----- new argument
              ),
              (TapAndPanGestureRecognizer instance) {
                instance
                  ..onTapDown = (TapDragDownDetails details) {
                    _previousDragPosition = details.globalPosition;
                  }
                  ..onDragStart = (TapDragStartDetails details) {
                      print("Drag Start");
                      _zoomLogic(details.globalPosition);
                  }
                  ..onDragUpdate = (TapDragUpdateDetails details) {
                      print("Drag Update");
                      _zoomLogic(details.globalPosition);
                  }
                  ..onDragEnd = (TapDragEndDetails details) {      
                    print("Drag End");              
                    setState(() {
                      _currentScale = 1.0;
                    });
                    _previousDragPosition = null;
                  };
              },
            ),
            //wins the arena if there is only one tap followed by a pan
            ScaleGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<ScaleGestureRecognizer>(
              () => ScaleGestureRecognizer(),
              (ScaleGestureRecognizer instance) {
                instance
                  ..onStart = (ScaleStartDetails details) {
                    print('Scale Start');
                  }
                  ..onUpdate = (ScaleUpdateDetails details) {
                    print('Scale Update');
                  }
                  ..onEnd = (ScaleEndDetails details) {
                    print('Scale End');
                  };
              },
            ),
      },
      child: Transform.scale(scale: _currentScale, child: widget.child),
    );
  }
}

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

…GestureRecognizer

…ing drag start

yakagami · 2025-03-11T19:40:20Z

After some testing, I see that you can't combine TapAndPanGestureRecognizer with DoubleTapGestureRecognizer. In fact, nothing is printed from either TapAndPanGestureRecognizer or DoubleTapGestureRecognizer. (With and without this PR.)

Full example

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

/// Flutter code sample for [TapAndPanGestureRecognizer].

void main() {
  runApp(const TapAndDragToZoomApp());
}

class TapAndDragToZoomApp extends StatelessWidget {
  const TapAndDragToZoomApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: TapAndDragToZoomWidget(child: MyBoxWidget()))),
    );
  }
}

class MyBoxWidget extends StatelessWidget {
  const MyBoxWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blueAccent, height: 100.0, width: 100.0);
  }
}

// This widget will scale its child up when it detects a drag up, after a
// double tap/click. It will scale the widget down when it detects a drag down,
// after a double tap. Dragging down and then up after a double tap/click will
// zoom the child in/out. The scale of the child will be reset when the drag ends.
class TapAndDragToZoomWidget extends StatefulWidget {
  const TapAndDragToZoomWidget({super.key, required this.child});

  final Widget child;

  @override
  State<TapAndDragToZoomWidget> createState() => _TapAndDragToZoomWidgetState();
}

class _TapAndDragToZoomWidgetState extends State<TapAndDragToZoomWidget> {
  final double scaleMultiplier = -0.0001;
  double _currentScale = 1.0;
  Offset? _previousDragPosition;

  static double _keepScaleWithinBounds(double scale) {
    const double minScale = 0.1;
    const double maxScale = 30;
    if (scale <= 0) {
      return minScale;
    }
    if (scale >= 30) {
      return maxScale;
    }
    return scale;
  }

  void _zoomLogic(Offset currentDragPosition) {
    final double dx = (_previousDragPosition!.dx - currentDragPosition.dx).abs();
    final double dy = (_previousDragPosition!.dy - currentDragPosition.dy).abs();

    if (dx > dy) {
      // Ignore horizontal drags.
      _previousDragPosition = currentDragPosition;
      return;
    }

    if (currentDragPosition.dy < _previousDragPosition!.dy) {
      // Zoom out on drag up.
      setState(() {
        _currentScale += currentDragPosition.dy * scaleMultiplier;
        _currentScale = _keepScaleWithinBounds(_currentScale);
      });
    } else {
      // Zoom in on drag down.
      setState(() {
        _currentScale -= currentDragPosition.dy * scaleMultiplier;
        _currentScale = _keepScaleWithinBounds(_currentScale);
      });
    }
    _previousDragPosition = currentDragPosition;
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: <Type, GestureRecognizerFactory>{
        TapAndPanGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<TapAndPanGestureRecognizer>(
              () => TapAndPanGestureRecognizer(
                //minTaps: 2,
              ),
              (TapAndPanGestureRecognizer instance) {
                instance
                  ..onTapDown = (TapDragDownDetails details) {
                    _previousDragPosition = details.globalPosition;
                  }
                  ..onTapUp = (TapDragUpDetails details) {
                    //print("Tap Up");
                  }
                  ..onDragStart = (TapDragStartDetails details) {
                      print("Drag Start");
                      _zoomLogic(details.globalPosition);
                  }
                  ..onDragUpdate = (TapDragUpdateDetails details) {
                      print("Drag Update");
                      _zoomLogic(details.globalPosition);
                  }
                  ..onDragEnd = (TapDragEndDetails details) {      
                    print("Drag End");              
                    setState(() {
                      _currentScale = 1.0;
                    });
                    _previousDragPosition = null;
                  };
              },
            ),
            DoubleTapGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<DoubleTapGestureRecognizer>(
              () => DoubleTapGestureRecognizer(),
              (DoubleTapGestureRecognizer instance) {
                instance
                  ..onDoubleTap = () {
                    print('Double Tap');
                  };
              },
            ),
            
      },
      child: Transform.scale(scale: _currentScale, child: widget.child),
    );
  }
}

I wonder if it would make sense to add a clean way to recognize double or n taps within TapAndPanGestureRecognizer. But I also realize it could be a bad idea to add too much functionality to one gesture. You can almost get this already with TapAndPanGestureRecognizer but consider this case:

User taps three times then drags:

You could interpret this in many ways:

Perform double tap immediately and then do nothing, allowing a potential drag gesture to take over
Perform a double tap immediately and then on the third tap+drag, perform the pan/scale action
Do not perform the double tap, only scale after third tap + drag

Google earth does the first and Google photos does the second. With the current implementation, there is no way to let the third tap fall through back to the gesture arena as the beginning of a new gesture (such as a drag).

Besides this, the current method of detecting a double tap with TapAndPanGestureRecognizer is somewhat cumbersome as you have to do this:

Click

int _tapUpCount = 0;
..onTapUp = (TapDragUpDetails details) {
  _tapUpCount++;
  if(_tapUpCount == 2){
    performDoubleTap();
  }
}
..onDragStart = (TapDragStartDetails details) {
   //don't scale if a double tap occurred.
    if(_tapUpCount <2){
      _zoomLogic(details.globalPosition);
    }
}
..onDragUpdate = (TapDragUpdateDetails details) {
    //don't scale if a double tap occurred.
    if(_tapUpCount <2){
      _zoomLogic(details.globalPosition);
    }
}
..onDragEnd = (TapDragEndDetails details) {      
   //don't scale if a double tap occurred.
    if(_tapUpCount <2){
     //...
    }
};

It would be nice if there was a way to say "After n taps up, complete the gesture and fire the n-tapsUp callback, something like:

(TapAndPanGestureRecognizer instance) {
    instance
     ..nTaps = 2
     ..onNTaps(){
          performDoubleTap();
     }

After onNTaps is called, the gesture would end immediately (or could be set to do so via an onNTapsBehavior enum.

All of this doesn't need to be part of the PR of course, I only mention this because in light of these issues, maybe my own solution is not good either and should be part of some entirely new gesture recognizer specifically meant for double tap, double-tap zoom and scale all in one. To be clean I do think the current PR is useful and would allow for replicating the Google photos behavior and even the Google earth behavior if you are able to perform a drag from the TapDragUpdate, eg. via a ScrollPosition. I also don't think the Google Earth behavior is even good, although I'm not sure what the correct behavior should be.

yakagami added 2 commits March 10, 2025 12:45

add minTaps argument to BaseTapAndDragGestureRecognizer and TapAndPan…

7c50ef0

…GestureRecognizer

add tests and check that consecutiveTapCount >= minTaps before accept…

4d4cc75

…ing drag start

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: gestures flutter/packages/flutter/gestures repository. labels Mar 10, 2025

format

97f5356

Renzo-Olivares self-requested a review March 11, 2025 19:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add minTaps argument to BaseTapAndDragGestureRecognizer and TapAndPanGestureRecognizer #164922

add minTaps argument to BaseTapAndDragGestureRecognizer and TapAndPanGestureRecognizer #164922

yakagami commented Mar 10, 2025 •

edited

Loading

yakagami commented Mar 11, 2025 •

edited

Loading

add minTaps argument to BaseTapAndDragGestureRecognizer and TapAndPanGestureRecognizer #164922

Are you sure you want to change the base?

add minTaps argument to BaseTapAndDragGestureRecognizer and TapAndPanGestureRecognizer #164922

Conversation

yakagami commented Mar 10, 2025 • edited Loading

Pre-launch Checklist

yakagami commented Mar 11, 2025 • edited Loading

yakagami commented Mar 10, 2025 •

edited

Loading

yakagami commented Mar 11, 2025 •

edited

Loading