Types of Widgets Flutter – Gestures

Flutter Gestures

A gesture is a physical action performed by the user on a touch-based device, such as tapping the screen, swiping, or pinching. These actions allow users to interact with the app in a natural and dynamic way. In modern mobile apps, gesture interaction is essential. Flutter provides powerful tools to detect and respond to user gestures like taps, swipes, pinches, and drags — making your apps more intuitive and user-friendly.Whether it’s a simple tap to open something, a drag to move objects, or a swipe to delete an item, gestures are a core part of mobile user experience.

Some widely used gestures are mentioned here :

Gestures

Tap: A quick touch and release.
Double Tap: Two quick taps in a row.
Drag: Touch and move without lifting the finger.
Flick: A fast drag gesture, usually to trigger momentum-based scrolling.
Pinch: Two fingers moving closer together (used to zoom out).
Zoom: Two fingers moving apart (used to zoom in).
Panning: Touching the device surface with the fingertip and moving it in the desired direction without releasing the fingertip.

The GestureDetector widget in flutter is used to detect physical interaction with the application on the UI. If a widget is supposed to experience a gesture, it is kept inside the GestureDetector widget. The same widget catches the gesture and returns the appropriate action or response.

Below is the list of gestures and their corresponding events :

Tap

onTapDown
onTapUp
onTap
onTapCancel

Double tap

onDoubleTap

Long press

onLongPress

Vertical drag

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Horizontal drag

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

Pan

onPanStart
onPanUpdate
onPanEnd

Example


import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Gestures';

    return const MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: const Center(child: MyButton()),
    );
  }
}

class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // // The GestureDetector wraps the button.
    return GestureDetector(
      // show snackbar on tap of child
      onTap: () {
        const snackBar =
            SnackBar(content: Text(" You just Tapped on the Button"));

        // // ignore: deprecated_member_use
        Scaffold.of(context).showSnackBar(snackBar);
      },
      // The tap button
      child: Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          // // ignore: deprecated_member_use
          color: Theme.of(context).buttonColor,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: const Text('Tap Button'),
      ),
    );
  }
}

Flutter supports Listener widgets that are low-level gesture detection mechanism. It detects user interaction and dispatches one of the below mentioned corresponding events:

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter also has widgets to do specific as well as advanced gestures. These widgets are as below:

Dismissible: Allows swipe-to-dismiss gesture, commonly used in lists.
Draggable: Makes a widget draggable.
LongPressDraggable: Enables dragging only after a long press.
DragTarget: Accepts dropped draggable widgets.
IgnorePointer: Prevents its child from receiving gestures.
AbsorbPointer: Prevents gestures from reaching children, but widget itself is visible.
Scrollable: Enables content scrolling (used in ListView, GridView, etc.).

Flutter – Gestures