Flutter Gestures with Example

Flutter provides a rich set of gestures that can be used to create interactive user interfaces. In this blog, we'll explore some of the most commonly used gestures in Flutter and how to implement them with examples.

onTap

The onTap gesture is used to detect when a user taps on a widget.

Let's look at an example of how to use it

GestureDetector(
  onTap: () {
    print('Widget tapped!');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

In this code, we're using the GestureDetector widget to detect when the user taps on the blue container. When the container is tapped, the onTap function will be called and the message "Widget tapped!" will be printed to the console.

onDoubleTap

The onDoubleTap gesture is used to detect when a user double-taps on a widget.

Let's look at an example of how to use it

GestureDetector(
  onDoubleTap: () {
    print('Widget double-tapped!');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

In this code, we're using the GestureDetector widget to detect when the user double-taps on the blue container. When the container is double-tapped, the onDoubleTap function will be called and the message "Widget double-tapped!" will be printed to the console.

onLongPress

The onLongPress gesture is used to detect when a user long-presses on a widget.

Let's look at an example of how to use it:

GestureDetector(
  onLongPress: () {
    print('Widget long-pressed!');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

In this code, we're using the GestureDetector widget to detect when the user long-presses on the blue container. When the container is long-pressed, the onLongPress function will be called and the message "Widget long-pressed!" will be printed to the console.

onHorizontalDragUpdate

The onHorizontalDragUpdate gesture is used to detect when a user horizontally drags on a widget.

Let's look at an example of how to use it

GestureDetector(
  onHorizontalDragUpdate: (DragUpdateDetails details) {
    print('Horizontal drag update: ${details.delta.dx}');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

In this code, we're using the GestureDetector widget to detect when the user horizontally drags on the blue container. When the container is dragged, the onHorizontalDragUpdate function will be called and the horizontal drag distance will be printed to the console.

onVerticalDragUpdate

The onVerticalDragUpdate gesture is used to detect when a user vertically drags on a widget.

Let's look at an example of how to use it

GestureDetector(
  onVerticalDragUpdate: (DragUpdateDetails details) {
    print('Vertical drag update: ${details.delta.dy}');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

In this code, we're using the GestureDetector widget to detect when the user vertically drags on the blue container. When the container is dragged