How to make GestureDetector detect two-finger drag in Flutter Web?

Question

I'm trying to implement Smooth Scroll in a PageView, so I have set the physics property to NeverScrollableScrollPhysics() and I have wrapped the items in the builder fonction with a GestureDetector that detects Drag gestures. When a drag gesture is detected, a function is triggered and the page will be change accordingly.

My problem is that on Flutter Web, the onVerticalDragGesture is only detected when dragging with three fingers, and nothing happens when swiping with two. Is there any way to solve this?

By the way, the result is the same with the onPanUpdate property. Feel free to suggest other ways to implement Smooth Scroll. Thanks in advance, guys.

Here is my code if you want to reproduce it:

PageView.builder(
 physics: NeverScrollableScrollPhysics(),
 controller: /* PAGECONTROLLER */,
 scrollDirection: Axis.vertical,
 pageSnapping: false,
 itemBuilder: (context, index) {
  return GestureDetector(
  onVerticalDragUpdate: (DragUpdateDetails details) {
  if (details.delta.dy > 5.0) {
   /* FUNCTION TO MOVE TO PREVIOUS PAGE */
  }
  if (details.delta.dy < -5.0) {
   /* FUNCTION TO MOVE TO NEXT PAGE */
  }
 },
 child: /* PAGES OF THE PAGEVIEW, JUST USE EMPTY CONTAINERS WITH DIFFERENT COLORS */,
 );
},
 itemCount: /* NUMBER OF PAGES */,
),

Compound

Answer 1

By default, GestureDetector in Flutter only detects single finger gestures. To detect multi-finger gestures, you can use the Listener widget with a GestureRecognizer to recognize the multi-finger gesture.

Here's a code snippet that may helps using Listener and PanGestureRecognizer:

    Listener(
  onPointerDown: (event) {
    if (event.kind == PointerDeviceKind.touch && event.pointer != 0) {
      // A second finger is down, start recognizing the gesture
      _gestureRecognizer.addPointer(event);
    }
  },
  onPointerUp: (event) {
    if (event.kind == PointerDeviceKind.touch && event.pointer != 0) {
      // The second finger is up, stop recognizing the gesture
      _gestureRecognizer.removePointer(event);
    }
  },
  child: Container(
    // Your widget tree
  ),
);

// Initialize the gesture recognizer in your widget state
PanGestureRecognizer _gestureRecognizer = PanGestureRecognizer()
  ..onStart = (details) {
    // This is called when the gesture starts
    // Check that it is a two-finger gesture before handling it
    if (_gestureRecognizer.numberOfPointers == 2) {
      // Handle the two-finger drag gesture
      print('Two-finger drag started');
    }
  }
  ..onUpdate = (details) {
    // This is called when the gesture is updated
    // Check that it is a two-finger gesture before handling it
    if (_gestureRecognizer.numberOfPointers == 2) {
      // Handle the two-finger drag gesture
      print('Two-finger drag updated');
    }
  }
  ..onEnd = (details) {
    // This is called when the gesture ends
    // Check that it is a two-finger gesture before handling it
    if (_gestureRecognizer.numberOfPointers == 2) {
      // Handle the two-finger drag gesture
      print('Two-finger drag ended');
    }
  };

Seismic

PanGestureRecognizer doesn't have a removePointer method, or numberOfPointers. – Aecium