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, )