Flutter Gestures (original) (raw)

Last Updated : 15 Jul, 2025

Gestures are used to interact with an application. It is generally used in touch-based devices to physically interact with the application. It can be as simple as a single tap on the screen to a more complex physical interaction like swiping in a specific direction to scrolling down an application. It is heavily used in gaming and more or less every application requires it to function as devices turn more touch-based than ever. In this article, we will discuss them in detail.

Some widely used gestures are mentioned here :

**Tap: Touching the surface of the device with the fingertip for a small duration of time period and finally releasing the fingertip.
**Double Tap: Tapping twice in a short time.
**Drag: Touching the surface of the device with the fingertip and then moving the fingertip in a steadily and finally releasing the fingertip.
**Flick: Similar to dragging, but doing it in a speedier way.
**Pinch: Pinching the surface of the device using two fingers.
**Zoom: Opposite of pinching.
**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.

Constructor of GestureDetector:

GestureDetector GestureDetector({
Key? key,
Widget? child,
void Function(TapDownDetails)? onTapDown,
void Function(TapUpDetails)? onTapUp,
void Function()? onTap,
void Function()? onTapCancel,
void Function()? onSecondaryTap,
void Function(TapDownDetails)? onSecondaryTapDown,
void Function(TapUpDetails)? onSecondaryTapUp,
void Function()? onSecondaryTapCancel,
void Function(TapDownDetails)? onTertiaryTapDown,
void Function(TapUpDetails)? onTertiaryTapUp,
void Function()? onTertiaryTapCancel,
void Function(TapDownDetails)? onDoubleTapDown,
void Function()? onDoubleTap,
void Function()? onDoubleTapCancel,
void Function(LongPressDownDetails)? onLongPressDown,
void Function()? onLongPressCancel,
void Function()? onLongPress,
.........
})

Key Properties

**Property	**Description
child	The widget below this widget in the tree.
onTapDown	A pointer that might cause a tap with a primary button has contacted the screen at a particular location.
onTapUp	A pointer that will trigger a tap with a primary button has stopped contacting the screen at a particular location.
onTap	A tap with a primary button has occurred.
onTapCancel	The pointer that previously triggered onTapDown will not end up causing a tap.
onDoubleTap	The user has tapped the screen with a primary button at the same location twice in quick succession.
onLongPress	Called when a long press gesture with a primary button has been recognized.

**Example for Flutter Gestures

**main.dart:

Dart `

import 'package:flutter/material.dart';

// Entry point of the application void main() => runApp(const MyApp());

// Root widget of the application class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

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

return MaterialApp(
  title: title,
  home: const MyHomePage(title: title),
  debugShowCheckedModeBanner: false,
);

} }

// Home page widget 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, foregroundColor: Colors.white, ), body: const Center(child: MyButton()), ); } }

// Custom button widget with gesture detection 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"));

    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  },
  // The tap button
  child: Container(
    padding: const EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: const Text(
      'Tap Button',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

} }

To know more about Container and SnackBar in flutter refer this articles respectively: Container class in Flutter and Flutter – Snackbar.

**Output: