4 Best Flutter Gesture Detector Packages

If you wan 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 which can track swipe gesture, 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 object . The object in result can be used by Transform 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,
    )

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close