Flutter : Everything you want to know about GestureDetector
Although Flutter includes a handful of button implementations, such as: RaisedButton, IconButton , FlatButton, and CupertinoButton, you may want to create a custom button with your own style and shape. In that case you have to respond to user gestures. For that, the GestureDetector widget allows you to listen for, and respond to, gestures in Flutter including, for example, taps, drags, and scaling.
Gestures can dispatch multiple events, corresponding to the lifecycle of the gesture. We will take a look at many of these gestures and events in the following.
You can follow with me and try some of the examples in this article in the online DartPad flutter editor. All the source codes are here. The scale and rotate gesture needs a multi-touch screen.
Tap
This gesture has many events related to it (onTapDown, onTapUp, onTap and onTapCancel). For now, we will only present the onTap event. If you want to see more details about Flutter gestures and events, go to the official Flutter documentation : Taps, drags, and other gestures.
In the following example we are wrapping the blue Container in the GestureDetector widget.
The onTap event is triggered whenever the user clicks (a simple click) on the blue container. In this example the Text widget above the container will be updated with a new random value.
Double tap
This gesture will trigger the onDoubleTap event which occurs when the user has tapped the screen at the same location twice in quick succession. In our example we reset the value of the Text widget text to ‘0’.
Long press
This gesture will trigger the onLongPress event when you press the screen at the same location for a long period of time.
This time when the user press the button for a long time we will show a simple dialog box that contains a title, a text and a button to close it. This is the function to show the dialog box :
_showDialog() {
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("GestureDetector"),
content: new Text("Hey! I'm onLongPress event"),
actions: <Widget>[
FlatButton(
child: Text('Close me!'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
}And then we will call it in the onLongPress event.
The scale gesture
Now we will move to a little bit more complicated gestures. First we will try to implement the scale gesture. For that we will need the help of the Transform widget (the Transform.scale constructor) to apply the scale value returned by the gesture. The scale events are : onScaleStart, onScaleUpdate and onScaleEnd.
Rotation
You may expect to have something like onRotationUpdate in the GestureDetector widget, but there is no such event. Instead, we will use the rotation property of the details parameter of type ScaleUpdateDetails in the onScaleUpdate event. We will convert this value from radian to degrees and assign it to the angle property of the Transform widget (the Transform.rotate constructor).
This time we will change the origin parameter (the offset) so the rotation will not occur at the center of the container.
Pan
The last gesture that we are going to see is the pan gesture. onPanStart, onPanUpdate and onPanEnd are the events associated with this gesture. For our example we will only use onPanUpdate which occurs when a pointer is in contact with the screen and is moving in the vertical or horizontal direction.
We will get the delta value (how much the pointer has moved since the previous update) from DragUpdateDetails in onPanUpdate, add it to the old offset (dxy) and assign it to the offset property of the Transform widget (the Transform.translate constructor).
Finally, you can use the same logic when dealing with the other gestures and events.
Note that there are some limitations when combining different types of gestures, so carefully read the documentation to avoid unexpected behaviors.
Thank you for reading my article. Please, if you like it, share it.
See also :
