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