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);
}
}
Author by
David
Updated on December 05, 2022Comments
-
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, ), ), ), ); }