How to calculate the distance of pointer in VerticalDragDown Gesture in Flutter? - dart

Question

In my app, when the user drags down, I want to execute a method. The problem is even when the user only taps on the screen, the VerticalDragDown event is fired. My guess is the tap event fired a drag event with a small distance. So I want to calculate the distance that users have dragged, if it's larger than a certain amount, then call the method.
Surprisingly there was no such info in the DragStartDetails, DragEndDetails, DragDownDetails classes. The details.globalPosition.distance property seems like the distance from the touched point to the screen edge, not dragged distance because I have tried to drag with different length but the result is almost the same. And only onVerticalDragDown callback was called.
Here is my code:
Widget _buildScanGuide() {
return GestureDetector(
onVerticalDragStart: (details) {
print('DragStart: $details');
},
onVerticalDragDown: (details) {
print('DragDown: $details');
},
onVerticalDragEnd: (details) {
print('DragEnd: $details');
},
onVerticalDragUpdate: (details) {
print('DragUpdate: $details');
},
child: ListView(
padding: EdgeInsets.only(top: 50.0),
children: <Widget>[
Center(
child: Text('No device founded!',
style: TextStyle(fontSize: 24.0, color: kTextColor))),
Padding(
padding: const EdgeInsets.symmetric(vertical: 40.0),
child: Icon(
Icons.arrow_downward,
size: 96.0,
color: kTextColor,
),
),
Center(
child: Text('Drag down to scan for devices.',
style: TextStyle(fontSize: 24.0, color: kTextColor))),
],
),
);
}
And in debug console:
I/flutter (20427): DragDown: DragDownDetails(Offset(268.0, 192.5))
I/flutter (20427): DragDown: DragDownDetails(Offset(288.4, 173.2))
I/flutter (20427): DragDown: DragDownDetails(Offset(92.7, 235.4))
I/flutter (20427): DragDown: DragDownDetails(Offset(264.5, 168.1))
I/flutter (20427): DragDown: DragDownDetails(Offset(264.5, 173.2))
I/flutter (20427): DragDown: DragDownDetails(Offset(280.3, 176.6))
I/flutter (20427): DragDown: DragDownDetails(Offset(267.6, 178.8))
I/flutter (20427): DragDown: DragDownDetails(Offset(63.9, 250.6))
I/flutter (20427): DragDown: DragDownDetails(Offset(277.8, 191.4))
I/flutter (20427): DragDown: DragDownDetails(Offset(279.2, 206.9))
I'm using flutter v0.5.7 dev channel.

Answer 1

I had to use Listener which is not recommended but it solves the problem
return Listener(
onPointerDown: (details) {
_pointerDownPosition = details.position;
},
onPointerUp: (details) {
if (details.position.dy - _pointerDownPosition.dy > 50.0) {
_dragHandler(pf10Bloc);
}
},
child: //...
More details could be found in docs https://flutter.io/gestures/

Answer 2

The onVerticalDragDown callback is called when
A pointer has contacted the screen and might begin to move vertically.
If you want to detect an vertical drag, I suggest you to handle the onVerticalDragUpdate callback. The DragUpdateDetails argument contains a primaryDelta property which is:
The amount the pointer has moved along the primary axis since the
previous update.
If only onVerticalDragDown is called, I think it's because of the ListView which captures the vertical drag event to scroll.
In your example you should use a Column widget if you don't need the scrolling feature, otherwise you will have to listen to the scroll position updates.