4 Best Flutter Gesture Detector Packages

With a gesture detector, app developers can provide users with intuitive interactions and even provide a gaming-style experience. There are numerous gesture detector packages available for Flutter.

If you want to detect a user’ advanced gesture and the built-in GestureDetector can’t handle your use case, you can check our following gesture detector packages.

tap_builder

TapBuilder is a widget for building interactive areas, which can replace the material’s Inkwell. It allows you to customize a widget’s effects in different states.

TapBuilder(
        onTap: () {},
        builder: (context, state) => AnimatedContainer(
            padding: EdgeInsets.symmetric(
                vertical: 16.0,
                horizontal: 16.0,
            ),            
            decoration: BoxDecoration(
                color: () {
                    switch (state) {
                        case TapState.disabled:
                            return Colors.grey;
                        case TapState.focused:
                            return Colors.lightBlue;
                        case TapState.hover:
                            return Colors.blue;
                        case TapState.inactive:
                            return Colors.black;
                        case TapState.pressed:
                            return Colors.green;
                    }
                }(),
            ),
            child: Text('New Button Widget'),
            duration: const Duration(milliseconds: 500),
        ),
    )

simple_gesture_detector

This is a lightweight gesture detector that can track swipe gestures, and tap gestures (onTap, onDoubleTap, onLongPress). It exposes simple callbacks to react to these gestures.

SimpleGestureDetector(
  onVerticalSwipe: _onVerticalSwipe,
  onHorizontalSwipe: _onHorizontalSwipe,
  onLongPress: _onLongPress,
  swipeConfig: SimpleSwipeConfig(
    verticalThreshold: 40.0,
    horizontalThreshold: 40.0,
    swipeDetectionBehavior: SwipeDetectionBehavior.continuousDistinct,
  ),
  child: Container(
    height: 160.0,
    width: 160.0,
    color: Colors.indigo,
    child: Center(
      child: Text(
        'Simple Detector',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18.0,
        ),
      ),
    ),
  ),
)

 void _onVerticalSwipe(SwipeDirection direction) {
    setState(() {
      if (direction == SwipeDirection.up) {
        _text = 'Swiped up!';
        print('Swiped up!');
      } else {
        _text = 'Swiped down!';
        print('Swiped down!');
      }
    });
  }

  void _onHorizontalSwipe(SwipeDirection direction) {
    setState(() {
      if (direction == SwipeDirection.left) {
        _text = 'Swiped left!';
        print('Swiped left!');
      } else {
        _text = 'Swiped right!';
        print('Swiped right!');
      }
    });
  }

  void _onLongPress() {
    setState(() {
      _text = 'Long pressed!';
      print('Long pressed!');
    });
  }

matrix_gesture_detector

MatrixGestureDetector class detects translation, scale, and rotation gestures and combines them into Matrix4 objects. The object in the result can be used by Transforming a widget or CustomPainter code.

  MatrixGestureDetector(
    onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
      setState(() {
        matrix = m;
      });
    },
    child: MyWidgetThatUsesMatrix(
      matrix: matrix,
      ...
    )
  )

gesture_x_detector

XGestureDetector widget can detect multiple types of gestures, including Tap, DoubleTap, Scale, Long-Press, and Move. Each gesture has its own callback, and all of them can be called simultaneously.

XGestureDetector(
      child: Material(
        child: Center(
          child: Text(
            lastEventName,
            style: TextStyle(fontSize: 30),
          ),
        ),
      ),
      doubleTapTimeConsider: 300,
      longPressTimeConsider: 350,
      onTap: onTap,
      onDoubleTap: onDoubleTap,
      onLongPress: onLongPress,
      onMoveStart: onMoveStart,
      onMoveEnd: onMoveEnd,
      onMoveUpdate: onMoveUpdate,
      onScaleStart: onScaleStart,
      onScaleUpdate: onScaleUpdate,
      onScaleEnd: onScaleEnd,
      bypassTapEventOnDoubleTap: false,
    )