Gesture Detector in Flutter With Example
In this article, we are going to learn how to integrate gesture detector in flutter applications through example. Gesture Detector is used to detect user’s gesture such as tap, double tap, drag, flick, pinch, zoom, panning etc.
Gesture Detector is useful for any mobile app user to interact with mobile applications. Gesture Detector is a stateless widget which is used for different touch events. We already used inkwell widget to handle touch events with animations.
Key key,
this.child,
this.onTapDown,
this.onTapUp,
this.onTap,
this.onTapCancel,
this.onSecondaryTap,
this.onSecondaryTapDown,
this.onSecondaryTapUp,
this.onSecondaryTapCancel,
this.onDoubleTap,
this.onLongPress,
this.onLongPressStart,
this.onLongPressMoveUpdate,
this.onLongPressUp,
this.onLongPressEnd,
this.onSecondaryLongPress,
this.onSecondaryLongPressStart,
this.onSecondaryLongPressMoveUpdate,
this.onSecondaryLongPressUp,
this.onSecondaryLongPressEnd,
this.onVerticalDragDown,
this.onVerticalDragStart,
this.onVerticalDragUpdate,
this.onVerticalDragEnd,
this.onVerticalDragCancel,
this.onHorizontalDragDown,
this.onHorizontalDragStart,
this.onHorizontalDragUpdate,
this.onHorizontalDragEnd,
this.onHorizontalDragCancel,
this.onForcePressStart,
this.onForcePressPeak,
this.onForcePressUpdate,
this.onForcePressEnd,
this.onPanDown,
this.onPanStart,
this.onPanUpdate,
this.onPanEnd,
this.onPanCancel,
this.onScaleStart,
this.onScaleUpdate,
this.onScaleEnd,
this.behavior,
this.excludeFromSemantics = false,
this.dragStartBehavior = DragStartBehavior.start,
})
Gesture Detector provides different callbacks to detect different types of gestures. onTap is called when screen is touched by user. onTapUp is called when user stops touching the screen. onTapDown is called when user contacts with screen. onTapCancel is called when user touches the screen but does not complete the tap.
onDoubleTap is called when screen is touched by twice in quick succession. onLongPress is called when user touches the screen for longer than 500 milliseconds. onLongPressStart is called when user begins to touch screen for longer than 500 milliseconds. onLongPressEnd is called when user stops to contact with screen after a long press. onLongPressMoveUpdate is called when pointer moved after a long press.
onSecondaryTap is called when user touches screen with secondary button. onSecondaryTapDown is called when user begins to contact with the screen using secondary button. onSecondaryTapUp is called when user stops to touch screen after secondary press. onSecondaryTapCancel is called when user touches the screen with secondary button but does not complete the secondary tap.
onScaleStart is called when a pointer interacts with the screen and make a focal point of 1. onScaleEnd is called when pointer is no longer in contact with screen. onScaleUpdate is called when screen has new focal point.
onPanStart is called when pointer begins to move. onPanEnd is called when pan is complete. onPanDown is called when pointer makes contact with screen. onPanUpdate is called when pointer changes location.
onVerticalDragStart is called when pointer begins to move in vertical direction. onVerticalDragEnd is called when user stops moving in vertical direction. onVerticalDragDown is called when user makes contact with screen and begins to move in vertical direction. onVerticalDragUpdate is called when pointer changes position in vertical direction. onVerticalDragCancel is called when user stops dragging in vertical direction.
onHorizontalDragStart is called when pointer begins to move in horizontal direction. onHorizontalDragEnd is called when user stops moving in horizontal direction. onHorizontalDragDown is called when user makes contact with screen and begins to move in horizontal direction. onHorizontalDragUpdate is called when pointer changes position in horizontal direction. onHorizontalDragCancel is called when user stops dragging in horizontal direction.
Drag Start
onHorizontalDragStart: _onHorizontalDragStartHandler,
onVerticalDragStart: _onVerticalDragStartHandler,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
this.dragDirection,
style: TextStyle(
fontSize: 55,
fontWeight: FontWeight.w700,
),
),
Text(
‘Start DX point: ${this.startDXPoint}’,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w500,
),
),
Text(
‘Start DY point: ${this.startDYPoint}’,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w500,
),
),
],
)),
),
void _onHorizontalDragStartHandler(DragStartDetails details) {
setState(() {
this.dragDirection = “HORIZONTAL”;
this.startDXPoint = ‘${details.globalPosition.dx.floorToDouble()}’;
this.startDYPoint = ‘${details.globalPosition.dy.floorToDouble()}’;
});
}
void _onVerticalDragStartHandler(DragStartDetails details) {
setState(() {
this.dragDirection = “VERTICAL”;
this.startDXPoint = ‘${details.globalPosition.dx.floorToDouble()}’;
this.startDYPoint = ‘${details.globalPosition.dy.floorToDouble()}’;
});
}
Drag Update
String dXPoint = ”;
String dYPoint = ”;
String velocity = ”;
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onHorizontalDragUpdate: _onHorizontalDragUpdateHandler,
onVerticalDragUpdate: _onVerticalDragUpdateHandler,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
this.dragDirection,
style: TextStyle(
fontSize: 55,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.center,
),
Text(
‘Update DX point: ${this.dXPoint}’,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w500,
),
),
Text(
‘Update DY point: ${this.dYPoint}’,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w500,
),
),
],
)),
),
void _onHorizontalDragUpdateHandler(DragUpdateDetails details) {
setState(() {
this.dragDirection = “HORIZONTAL UPDATING”;
this.dXPoint = ‘${details.globalPosition.dx.floorToDouble()}’;
this.dYPoint = ‘${details.globalPosition.dy.floorToDouble()}’;
this.velocity = ”;
});
}
void _onVerticalDragUpdateHandler(DragUpdateDetails details) {
setState(() {
this.dragDirection = “VERTICAL UPDATING”;
this.dXPoint = ‘${details.globalPosition.dx.floorToDouble()}’;
this.dYPoint = ‘${details.globalPosition.dy.floorToDouble()}’;
this.velocity = ”;
});
}
Drag End
String dXPoint = ”;
String dYPoint = ”;
String velocity = ”;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: GestureDetector(
onHorizontalDragEnd: _onDragEnd,
onVerticalDragEnd: _onDragEnd,
child: Container(
width: 700,
height: 700,
child: Text(
this.velocity,
style: TextStyle(
fontSize: 55,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.center,
),
),
),
void _onDragEnd(DragEndDetails details) {
double result = details.velocity.pixelsPerSecond.dx.abs().floorToDouble();
setState(() {
this.velocity = ‘$result’;
});
}
Tap using Gesture Detector in Flutter
onTap: (){
print(“TAP”);
},
onDoubleTap: (){
print(“DOUBLE TAP”);
},
onLongPress: (){
print(“LONG PRESS”);
},
),
Scale using Gesture Detector in Flutter
onScaleUpdate: _onScaleUpdateHandler,
child: Center(
child: Text(
this.distance,
style: TextStyle(
fontSize: 55,
fontWeight: FontWeight.w700,
),
),
),
)
void _onScaleUpdateHandler(ScaleUpdateDetails details) {
setState(() {
this.distance = ‘${details.scale.toStringAsFixed(3)}’;
});
}
Pingback: Flutter Package for Utility Integration Tutorial - CodingWithDhrumil
Pingback: Tensorflow Object Detection API in Flutter - CodingWithDhrumil
Pingback: Flutter GridView Drag and Drop Example - CodingWithDhrumil