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.

Adding onTap gesture

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’.

Adding onDoubleTap gesture

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.

The scale gesture

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.

Rotation

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 :

--

--

--

Computer Science Engineer and Cisco Instructor

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

ICYMI: WSO2 Identity Server March community call notes

Data Structures: Linked Lists with Python

Developer CV — Free IT CV template is now available

How candidates can improve even though they got the technical interview question right.

Angular + GitHub + CI/CD + Kubernetes Engine -1

Django — Step 14

What you should know before “learning to code” in 2019

Understanding Quick-Sort.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ouzani Abd Raouf

Ouzani Abd Raouf

Computer Science Engineer and Cisco Instructor

More from Medium

Why you should try Flutter on your Next Project

How to add IPFS to your Flutter project ?

Simplifying App Development with FlutterFlow — A Drag and Drop UI builder for Flutter.

Grocery store app — Flutter support 2.8.1 Nulled