Flutter - Multiple gestures without lifting the finger

2,527

If anyone is still interested, I was able to achieve the desired behaviour using the DelayedMultiDragGestureRecognizer class.

The code looks like this:

  void onDrag(details) {
    // Called on drag update
  }

  void onEndDrag(details) {
    // Called on drag end
  }

  @override
  Widget build(BuildContext context) {
    return new RawGestureDetector(
      gestures: <Type, GestureRecognizerFactory>{
        DelayedMultiDragGestureRecognizer:
            new GestureRecognizerFactoryWithHandlers<
                DelayedMultiDragGestureRecognizer>(
          () => new DelayedMultiDragGestureRecognizer(),
          (DelayedMultiDragGestureRecognizer instance) {
            instance
              ..onStart = (Offset offset) {
                /* More code here */
                return new ItemDrag(onDrag, endDrag);
              };
          },
        ),
      },
    );
  }

ItemDrag is a class that extends the Flutter Drag class:

class ItemDrag extends Drag {
  final GestureDragUpdateCallback onUpdate;
  final GestureDragEndCallback onEnd;

  ItemDrag(this.onUpdate, this.onEnd);

  @override
  void update(DragUpdateDetails details) {
    super.update(details);
    onUpdate(details);
  }

  @override
  void end(DragEndDetails details) {
    super.end(details);
    onEnd(details);
  }
}
Share:
2,527
David
Author by

David

Updated on December 05, 2022

Comments

  • David
    David over 1 year

    I'm trying to create the following effect: when the user long presses on the empty screen, a rectangle appears. Without lifting the finger, I want the user to be able to drag one of the edges of the rectangle (for example, vertically).

    I am able to achieve these effects separately (long press, release, drag), but I need to have them without lifting the finger.

    Currently, my code looks like this:

     @override
      Widget build(BuildContext context) {
        return GestureDetector(
          onPanStart: startDrag,
          onPanUpdate: onDrag,
          onPanEnd: endDrag,
          child: CustomPaint(
            painter: BoxPainter(
              color: BOX_COLOR,
              boxPosition: boxPosition,
              boxPositionOnStart: boxPositionOnStart ?? boxPosition,
              touchPoint: point,
            ),
            child: Container(),
          ),
        );
      }
    

    This achieves the dragging of the edge and is based on this tutorial.

    To make the element appear on a long press, I use an Opacity widget.

    @override
      Widget build(BuildContext context) {
        return new GestureDetector(
          onLongPress: () {
            setState(() {
              this.opacity = 1.0;
            });
          },
          child: new Container(
            width: width,
            height: height,
            child: new Opacity(
              opacity: opacity,
              child: PhysicsBox(
                boxPosition: 0.5,
              ),
            ),
          ),
        );
      }