How to implement a GestureDetector in Flutter?

Flutter does provide common widgets handling tap, such as IconButton. But sometimes, you need to detect gestures on a custom view: here comes GestureDetector!

How to add a GestureDetector

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

In main.dart, we launch the app as below.

This won’t build until we create HomePage. So let’s create a new folder home in lib folder, and add the file home_view.dart to it. Let’s add some UI code, to display a line of text, an icon, and another line of text, all of it with a red background.

We assume now that we want the whole red section to be clickable, so let’s add a GestureDetector.

 

Display touch feedback when tapping a GestureDetector

The GestureDetector offers different handles for each touch state. To show visual feedback when the user taps the view, we are going to render the background of the GestureDetector’s child based on the touch state. We will use a boolean to track whether a tap gesture is in progress.

 

Voila! We are now handling touch, and displaying touch feedback, when a user taps anywhere on the red section.

What next?

Check out the full list of currently supported gestures in Flutter.

Leave a Reply

Your email address will not be published. Required fields are marked *