Blog Details

img
Development

Flutter – Gestures

Spoke Right / 2 Nov, 2023

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.

Below is the list of gestures and their corresponding events :

  • 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:

  • Dart




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'),

      ),

    );

  }

}

Output:


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: Supports flick gesture to terminate the widget.
  • Draggable: Supports drag gesture to make the widget mobile.
  • LongPressDraggable: If the parent widgets are draggable, it supports the drag gesture to move the children widget.
  • DragTarget: Accepts any Draggable widget
  • IgnorePointer: When used it hides the widget and its corresponding children from the gesture detection process.
  • AbsorbPointer: Stops the gesture detection process itself to avoid action dispatch on overlapping widgets.
  • Scrollable: Makes content available inside the widget scrollable.

0 comments
Recent Blogs
Categories
Tags

Warning: PHP Startup: Unable to load dynamic library 'imagick.so' (tried: /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so: cannot open shared object file: No such file or directory), /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so: cannot open shared object file: No such file or directory)) in Unknown on line 0