GestureDetector Widget – Flutter Widget Guide By Flutter Agency

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

What is GestureDetector Widget?

GestureDetector Widget is a stateless widget that has parameters in its constructor for different touch events.GestureDetector Widget is a widget that detects gestures.

The Default constructor of GestureDetector look like below :

GestureDetector({
  Key key,
  Widget child,
  GestureTapDownCallback onTapDown,
  GestureTapUpCallback onTapUp,
  GestureTapCallback onTap,
  GestureTapCancelCallback onTapCancel,
  GestureTapDownCallback onSecondaryTapDown,
  GestureTapUpCallback onSecondaryTapUp,
  GestureTapCancelCallback onSecondaryTapCancel,
  GestureTapCallback onDoubleTap,
  GestureLongPressCallback onLongPress,
  GestureLongPressStartCallback onLongPressStart,
  GestureLongPressMoveUpdateCallback onLongPressMoveUpdate,
  GestureLongPressUpCallback onLongPressUp,
  GestureLongPressEndCallback onLongPressEnd,
  GestureDragDownCallback onVerticalDragDown,
  GestureDragStartCallback onVerticalDragStart,
  GestureDragUpdateCallback onVerticalDragUpdate,
  GestureDragEndCallback onVerticalDragEnd,
  GestureDragCancelCallback onVerticalDragCancel,
  GestureDragDownCallback onHorizontalDragDown,
  GestureDragStartCallback onHorizontalDragStart,
  GestureDragUpdateCallback onHorizontalDragUpdate,
  GestureDragEndCallback onHorizontalDragEnd,
  GestureDragCancelCallback onHorizontalDragCancel,
  GestureForcePressStartCallback onForcePressStart,
  GestureForcePressPeakCallback onForcePressPeak,
  GestureForcePressUpdateCallback onForcePressUpdate,
  GestureForcePressEndCallback onForcePressEnd,
  GestureDragDownCallback onPanDown,
  GestureDragStartCallback onPanStart,
  GestureDragUpdateCallback onPanUpdate,
  GestureDragEndCallback onPanEnd,
  GestureDragCancelCallback onPanCancel,
  GestureScaleStartCallback onScaleStart,
  GestureScaleUpdateCallback onScaleUpdate,
  GestureScaleEndCallback onScaleEnd,
  HitTestBehavior behavior,
  bool excludeFromSemantics: false,
  DragStartBehavior dragStartBehavior:     DragStartBehavior.start,
});

The GestureDetector only needs two things passed to it: a widget and a callback to correspond to a gesture.

Consider a simple example so that users can get an idea about how to use it.

GestureDetector(
    onTap: () => print("tapped!"),
    child: Text("Tap Me"),
);

Properties :

Tap :

onTapDown: A pointer that might cause a tap has contacted the screen at a particular location.
onTapUp: A pointer that will trigger a tap has stopped contacting the screen at a particular location
onTap: A tap has occurred.
onTapCancel: The pointer that previously triggered the onTapDown won’t cause a tap.

Double tap :

onDoubleTap: The user tapped the screen at the same location twice in quick succession.

Long press :

onLongPress: A pointer has remained in contact with the screen at the same location for a long period of time.

Vertical drag :

onVerticalDragStart: A pointer has contacted the screen and might begin to move vertically.
onVerticalDragUpdate: A pointer in contact with the screen has moved further in the vertical direction.
onVerticalDragEnd: A pointer that was previously in contact with the screen and moving vertically is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.

Horizontal drag :

onHorizontalDragStart: A pointer has contacted the screen and might begin to move horizontally.
onHorizontalDragUpdate: A pointer in contact with the screen has moved further in the horizontal direction.
onHorizontalDragEnd: A pointer that was previously in contact with the screen and moving horizontally is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.

Pan :

onPanDown: A pointer has contacted the screen with a primary button and might begin to move.
onPanStart: A pointer has contacted the screen with a primary button and has begun to move.
onPanUpdate: A pointer that is in contact with the screen with a primary button and moving has moved again.
onPanEnd: A pointer that was previously in contact with the screen with a primary button and moving is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.
onPanCancel: The pointer that previously triggered onPanDown did not complete.

Scale :

onScaleStart: When a pointer comes in contact with the screen and establishes a focal point of 1.0, this event is called.
onScaleUpdate: The pointer which is in contact with the screen have indicated a new focal point
onScaleEnd: Called when the pointer is no longer in contact with the screen signaling the end of the gesture.

Consider a code snippet as below :

import 'package:flutter/material.dart';

GestureDetectorWidgetState pageState;

class GestureDetectorWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    pageState = GestureDetectorWidgetState();
    return pageState;
  }
}

class GestureDetectorWidgetState extends State<GestureDetectorWidget> {
  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: ListView(
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          GestureDetector(
            onTap: () {
              showSnackBar("GestureDetector - onTap");
            },
            onDoubleTap: () {
              showSnackBar("GestureDetector - onDoubleTap");
            },
            onTapDown: (value) {
              showSnackBar("GestureDetector - onTapDown");
            },
            onTapCancel: () {
              showSnackBar("GestureDetector - onTapCancel");
            },
            onLongPress: () {
              showSnackBar("GestureDetector - onLongPress");
            },
            child: Container(
              height: 150,
              color: Colors.orangeAccent,
              alignment: Alignment(0, 0),
              margin: const EdgeInsets.all(10),
              child: Text("GestureDetector Example \nTap me!!",
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.caption.copyWith(
                        fontSize: 18,
                        fontWeight: FontWeight.w800,
                        color: Colors.white,
                      )),
            ),
          )
        ],
      ),
    );
  }

  myTitle(String title) {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment(-1, 0),
          padding: const EdgeInsets.only(left: 10, top: 10, bottom: 5),
          child: Text(
            "* $title",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        Divider(
          color: Colors.grey,
          height: 0,
          indent: 10,
          endIndent: 10,
        )
      ],
    );
  }

  showSnackBar(String message) {
    scaffoldKey.currentState
      ..hideCurrentSnackBar()
      ..showSnackBar(
        SnackBar(
          content: Text(message),
          backgroundColor: Colors.blue,
          action: SnackBarAction(
            label: "Done",
            textColor: Colors.white,
            onPressed: () {},
          ),
        ),
      );
  }
}

We will get output like below :

GestureDetector Widget

Thanks for reading !!!
Do let us know the suggestion/Feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.