GestureDetector introduction

In the previous article we introduced the Listener, and the GestureDetector is the encapsulation of the Listener, providing a wide range of gestures, including click, double click, drag, mixed gestures, etc.

Video Tutorial Address

Gesture series video tutorial address

When to use GestureDetector?

When we need to add click events to text, or drag or zoom components, we can use GestureDetector

GestureDetector constructor

We can see that there are many properties of GestureDetector. Next, we will classify them and explain them one by one.

GestureDetector({
    Key? key,
    this.child,
    this.onTapDown,
    this.onTapUp,
    this.onTap,
    this.onTapCancel,
    this.onSecondaryTap,
    this.onSecondaryTapDown,
    this.onSecondaryTapUp,
    this.onSecondaryTapCancel,
    this.onTertiaryTapDown,
    this.onTertiaryTapUp,
    this.onTertiaryTapCancel,
    this.onDoubleTapDown,
    this.onDoubleTap,
    this.onDoubleTapCancel,
    this.onLongPressDown,
    this.onLongPressCancel,
    this.onLongPress,
    this.onLongPressStart,
    this.onLongPressMoveUpdate,
    this.onLongPressUp,
    this.onLongPressEnd,
    this.onSecondaryLongPressDown,
    this.onSecondaryLongPressCancel,
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    this.onTertiaryLongPressDown,
    this.onTertiaryLongPressCancel,
    this.onTertiaryLongPress,
    this.onTertiaryLongPressStart,
    this.onTertiaryLongPressMoveUpdate,
    this.onTertiaryLongPressUp,
    this.onTertiaryLongPressEnd,
    this.onVerticalDragDown,
    this.onVerticalDragStart,
    this.onVerticalDragUpdate,
    this.onVerticalDragEnd,
    this.onVerticalDragCancel,
    this.onHorizontalDragDown,
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
    this.onHorizontalDragCancel,
    this.onForcePressStart,
    this.onForcePressPeak,
    this.onForcePressUpdate,
    this.onForcePressEnd,
    this.onPanDown,
    this.onPanStart,
    this.onPanUpdate,
    this.onPanEnd,
    this.onPanCancel,
    this.onScaleStart,
    this.onScaleUpdate,
    this.onScaleEnd,
    this.behavior,
    this.excludeFromSemantics = false.this.dragStartBehavior = DragStartBehavior.start,
  }) : assert(excludeFromSemantics ! =null),
       assert(dragStartBehavior ! =null),
       assert(() {
         final boolhaveVerticalDrag = onVerticalDragStart ! =null|| onVerticalDragUpdate ! =null|| onVerticalDragEnd ! =null;
         final boolhaveHorizontalDrag = onHorizontalDragStart ! =null|| onHorizontalDragUpdate ! =null|| onHorizontalDragEnd ! =null;
         final boolhavePan = onPanStart ! =null|| onPanUpdate ! =null|| onPanEnd ! =null;
         final boolhaveScale = onScaleStart ! =null|| onScaleUpdate ! =null|| onScaleEnd ! =null;
         if (havePan || haveScale) {
           if (havePan && haveScale) {
             throw FlutterError.fromParts(<DiagnosticsNode>[
               ErrorSummary('Incorrect GestureDetector arguments.'),
               ErrorDescription(
                 'Having both a pan gesture recognizer and a scale gesture recognizer is redundant; scale is a superset of pan.',
               ),
               ErrorHint('Just use the scale gesture recognizer.'),]); }final String recognizer = havePan ? 'pan' : 'scale';
           if (haveVerticalDrag && haveHorizontalDrag) {
             throw FlutterError(
               'Incorrect GestureDetector arguments.\n'
               'Simultaneously having a vertical drag gesture recognizer, a horizontal drag gesture recognizer, and a $recognizer gesture recognizer '
               'will result in the $recognizer gesture recognizer being ignored, since the other two will catch all drags.',); }}return true; } ()),super(key: key);
Copy the code

GestureDetector Click gesture

There are four click gestures, as follows:

field attribute describe
onTapDown GestureTapDownCallback The callback function when the finger is pressed
onTapUp GestureTapUpCallback The callback function when the finger is released
onTap GestureTapCallback Finger click callback function
onTapCancel GestureTapCancelCallback Finger cancel click callback function

GestureDetector Click gesture application scenario

Click gestures are commonly used to add click events to containers

GestureDetector Displays a click gesture example

We added the click gesture to the Container as follows:

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [
            GestureDetector(
              onTap: (){
                print("onTap");
              },
              onTapCancel: () {
                print("onTapCancel");
              },
              onTapDown: (details) {
                print("onTapDown---${details.globalPosition}---${details.localPosition}");
              },
              onTapUp: (details) {
                print("onTapUp---${details.globalPosition}---${details.localPosition}");
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.orange,
                alignment: Alignment.center,
                child: Text("Jimi",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30),),),)],),),); }}Copy the code

GestureDetector Clicks the gesture console to output the result

One: Click on the Container Container
flutter: onTapDown---Offset(211.5.317.0)---Offset(124.0.45.5)
flutter: onTapUp---Offset(211.5.317.0)---Offset(124.0.45.5)
flutter: onTap
Copy the code
Click on the Container and move out of the area without letting go
flutter: onTapDown---Offset(195.5.305.5)---Offset(108.0.34.0)
flutter: onTapCancel
Copy the code

GestureDetector double click gesture

There are three double click gestures, as follows:

field attribute describe
onDoubleTapDown GestureTapDownCallback The callback function when the finger is pressed
onDoubleTap GestureTapCallback The callback function when the finger is double-clicked
onDoubleTapCancel GestureTapCancelCallback Callback function when finger cancels

GestureDetector Double click gesture application scenarios

In certain cases you need to add a double click event to a single container

GestureDetector Double click gesture example

We added three double click callbacks to the Container as follows:

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [
            GestureDetector(
              onDoubleTap: () {
                print("onTapDown");
              },
              onDoubleTapCancel: () {
                print("onDoubleTapCancel");
              },
              onDoubleTapDown: (details) {
                print("onDoubleTapDown---${details.globalPosition}---${details.localPosition}");
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.orange,
                alignment: Alignment.center,
                child: Text("Jimi",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 30),),),)],),),); }}Copy the code

GestureDetector double-click the gesture console to output the result

Type 1: Double-click the Container
flutter: onDoubleTapDown---Offset(204.5.317.0)---Offset(117.0.45.5)
flutter: onTapDown
Copy the code
Second: Double-click the Container without lifting your finger and moving out of the area
flutter: onDoubleTapDown---Offset(195.5.283.5)---Offset(108.0.12.0)
flutter: onDoubleTapCancel
Copy the code

GestureDetector long press gesture

There are seven long press gestures, as follows:

field attribute describe
onLongPressDown GestureLongPressDownCallback The callback function when a finger is pressed
onLongPressCancel GestureLongPressCancelCallback Finger long press cancel callback function
onLongPress GestureLongPressCallback Finger length callback function
onLongPressStart GestureLongPressStartCallback The callback function when the finger is long pressed and begins to drag
onLongPressMoveUpdate GestureLongPressMoveUpdateCallback The callback function when the finger is long pressed and moved
onLongPressUp GestureLongPressUpCallback The callback function when the finger is long pressed and released
onLongPressEnd GestureLongPressEndCallback A callback function to end a drag with a long finger press

GestureDetector Long press gesture application scenario

Holding down a component requires certain methods to be performed, such as the water ripple effect of button length

GestureDetector long gesture demonstration case

We added the long press gesture to the Container as follows:

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [
            GestureDetector(
              onLongPress: (){
                print("onLongPress");
              },
              onLongPressCancel: () {
                print("onLongPressCancel");
              },
              onLongPressUp: () {
                print("onLongPressUp");
              },
              onLongPressDown: (details) {
                print("onLongPressDown---${details.globalPosition}---${details.localPosition}");
              },
              onLongPressEnd: (details) {
                print("onLongPressEnd---${details.globalPosition}---${details.localPosition}");
              },
              onLongPressStart: (details) {
                print("onLongPressStart---${details.globalPosition}---${details.localPosition}");
              },
              onLongPressMoveUpdate: (details) {
                print("onLongPressMoveUpdate---${details.globalPosition}---${details.localPosition}");
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.orange,
                alignment: Alignment.center,
                child: Text("Jimi",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30),),),)],),),); }}Copy the code

GestureDetector long press the gesture console to output results

Type 1: Click Container
flutter: onLongPressDown---Offset(199.0.336.0)---Offset(111.5.64.5)
flutter: onLongPressCancel
Copy the code
2. Press the Container and release it without moving your fingers
flutter: onLongPressDown---Offset(215.0.301.0)---Offset(127.5.29.5)
flutter: onLongPressStart---Offset(215.0.301.0)---Offset(127.5.29.5)
flutter: onLongPress
flutter: onLongPressEnd---Offset(215.0.301.0)---Offset(127.5.29.5)
flutter: onLongPressUp
Copy the code
3. Hold on to the Container and drag to release your fingers
flutter: onLongPressDown---Offset(169.0.314.0)---Offset(81.5.42.5)
flutter: onLongPressStart---Offset(169.0.314.0)---Offset(81.5.42.5)
flutter: onLongPress
flutter: onLongPressMoveUpdate---Offset(168.5.314.5)---Offset(81.0.43.0)
flutter: onLongPressMoveUpdate---Offset(165.0.318.5)---Offset(77.5.47.0)
flutter: onLongPressMoveUpdate---Offset(164.0.319.0)---Offset(76.5.47.5)
flutter: onLongPressMoveUpdate---Offset(158.5.323.5)---Offset(71.0.52.0)
flutter: onLongPressMoveUpdate---Offset(153.0.329.5)---Offset(65.5.58.0)
flutter: onLongPressMoveUpdate---Offset(148.5.335.0)---Offset(61.0.63.5)
flutter: onLongPressMoveUpdate---Offset(146.5.339.0)---Offset(59.0.67.5)
flutter: onLongPressMoveUpdate---Offset(146.5.339.5)---Offset(59.0.68.0)
flutter: onLongPressEnd---Offset(146.5.339.5)---Offset(59.0.68.0)
flutter: onLongPressUp
Copy the code
4. Hold the Container and move it out of the area immediately
flutter: onLongPressDown---Offset(97.0.277.5)---Offset(9.5.6.0)
flutter: onLongPressCancel
flutter: onLongPressDown---Offset(91.5.275.5)---Offset(4.0.4.0)
flutter: onLongPressCancel
Copy the code

GestureDetector vertical swipe gesture

There are five vertical swipe gestures, as follows:

field attribute describe
onVerticalDragDown GestureDragDownCallback The callback function when the finger is pressed
onVerticalDragStart GestureDragStartCallback The callback function when the finger begins to slide vertically
onVerticalDragUpdate GestureDragUpdateCallback The callback function when the finger slides vertically
onVerticalDragEnd GestureDragEndCallback The callback function at the end of a vertical finger slide
onVerticalDragCancel GestureDragCancelCallback A callback function to cancel with a vertical swipe

GestureDetector Application scenario of vertical sliding gestures

When you need to slide a component vertically

GestureDetector vertical swipe gesture demonstration

We added the vertical swipe gesture to the Container as follows:

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  double _left = 0;
  double _top = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [
            GestureDetector(
              onVerticalDragCancel: () {
                print("onVerticalDragCancel");
              },
              onVerticalDragDown: (details) {
                print("onVerticalDragDown---${details.globalPosition}---${details.localPosition}");
              },
              onVerticalDragEnd: (details) {
                print("onVerticalDragEnd---${details.velocity}---${details.primaryVelocity}");
              },
              onVerticalDragStart: (details) {
                print("onVerticalDragStart---${details.globalPosition}---${details.localPosition}");
              },
              onVerticalDragUpdate: (details) {
                print("onVerticalDragUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}");
                setState(() {
                  _top += details.delta.dy;
                });

              },
              child: Stack(
                children: [
                  Positioned(
                    left: _left,
                    top: _top,
                    child: Container(
                      width: 200,
                      height: 200,
                      color: Colors.orange,
                      alignment: Alignment.center,
                      child: Text("Jimi",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 30() [() [() [() [() [() [() [() [() }}Copy the code

GestureDetector vertical swipe gesture console output

One: Click on the Container Container
flutter: onVerticalDragDown---Offset(76.5.114.5)---Offset(76.5.38.5)
flutter: onVerticalDragStart---Offset(76.5.114.5)---Offset(76.5.38.5)
flutter: onVerticalDragEnd---Velocity(0.0.0.0)--0.0
Copy the code
Second: Drag a Container
flutter: onVerticalDragDown---Offset(185.5.332.5)---Offset(185.5.256.5)
flutter: onVerticalDragStart---Offset(185.5.332.5)---Offset(185.5.256.5)
flutter: onVerticalDragUpdate---Offset(185.5.332.0)---Offset(185.5.256.0)
flutter: onVerticalDragUpdate---Offset(187.5.322.0)---Offset(187.5.246.0)
flutter: onVerticalDragUpdate---Offset(192.0.307.0)---Offset(192.0.231.0)
flutter: onVerticalDragUpdate---Offset(193.5.298.0)---Offset(193.5.222.0)
flutter: onVerticalDragUpdate---Offset(193.5.297.0)---Offset(193.5.221.0)
flutter: onVerticalDragEnd---Velocity(131.3.548.9-548.8773895303548
Copy the code
Third: Drag the Container and release it immediately
flutter: onVerticalDragDown---Offset(10.5.93.5)---Offset(10.5.17.5)
flutter: onVerticalDragCancel
Copy the code

GestureDetector horizontal swipe gesture

There are five horizontal sliding gestures, as follows:

field attribute describe
onHorizontalDragDown GestureDragDownCallback The callback function when the finger is pressed
onHorizontalDragStart GestureDragStartCallback The callback function when the finger starts sliding horizontally
onHorizontalDragUpdate GestureDragUpdateCallback The callback function when the finger slides horizontally
onHorizontalDragEnd GestureDragEndCallback The callback function at the end of a horizontal finger slide
onHorizontalDragCancel GestureDragCancelCallback The callback function when the finger slides horizontally to cancel

GestureDetector Horizontal sliding gesture application scenario

When you need to slide a component horizontally

GestureDetector Horizontal swipe gesture demonstration case

We added the horizontal swipe gesture to the Container as follows:

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  double _left = 0;
  double _top = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [
            /// Horizontal slip
            GestureDetector(
              onHorizontalDragCancel: () {
                print("onHorizontalDragCancel");
              },
              onHorizontalDragDown: (details) {
                print("onHorizontalDragDown---${details.globalPosition}---${details.localPosition}");
              },
              onHorizontalDragEnd: (details) {
                print("onHorizontalDragEnd---${details.velocity}---${details.primaryVelocity}");
              },
              onHorizontalDragStart: (details) {
                print("onHorizontalDragStart---${details.globalPosition}---${details.localPosition}");
              },
              onHorizontalDragUpdate: (details) {
                print("onHorizontalDragUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}");
                setState(() {
                  _left += details.delta.dx;
                });

              },
              child: Stack(
                children: [
                  Positioned(
                    left: _left,
                    top: _top,
                    child: Container(
                      width: 200,
                      height: 200,
                      color: Colors.orange,
                      alignment: Alignment.center,
                      child: Text("Jimi",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 30() [() [() [() [() [() [() [() [() }}Copy the code

GestureDetector horizontal sliding console output

One: Click on the Container Container
flutter: onHorizontalDragDown---Offset(151.5.118.0)---Offset(151.5.42.0)
flutter: onHorizontalDragStart---Offset(151.5.118.0)---Offset(151.5.42.0)
flutter: onHorizontalDragEnd---Velocity(0.0.0.0)--0.0
Copy the code
Second: Drag a Container
flutter: onHorizontalDragDown---Offset(97.5.135.5)---Offset(97.5.59.5)
flutter: onHorizontalDragStart---Offset(97.5.135.5)---Offset(97.5.59.5)
flutter: onHorizontalDragUpdate---Offset(100.0.136.0)---Offset(100.0.60.0)---Offset(2.5.0.0)
flutter: onHorizontalDragUpdate---Offset(100.5.136.0)---Offset(100.5.60.0)---Offset(0.5.0.0)
flutter: onHorizontalDragUpdate---Offset(102.0.136.0)---Offset(102.0.60.0)---Offset(1.5.0.0)
flutter: onHorizontalDragUpdate---Offset(105.0.136.5)---Offset(105.0.60.5)---Offset(3.0.0.0)
flutter: onHorizontalDragUpdate---Offset(107.0.137.0)---Offset(107.0.61.0)---Offset(2.0.0.0)
flutter: onHorizontalDragUpdate---Offset(108.5.137.0)---Offset(108.5.61.0)---Offset(1.5.0.0)
flutter: onHorizontalDragUpdate---Offset(109.0.137.0)---Offset(109.0.61.0)---Offset(0.5.0.0)
flutter: onHorizontalDragUpdate---Offset(110.0.137.0)---Offset(110.0.61.0)---Offset(1.0.0.0)
flutter: onHorizontalDragUpdate---Offset(111.0.137.0)---Offset(111.0.61.0)---Offset(1.0.0.0)
flutter: onHorizontalDragEnd---Velocity(0.0.0.0)--0.0
Copy the code
Third: Drag the Container and release it immediately
flutter: onHorizontalDragDown---Offset(6.0.109.0)---Offset(6.0.33.0)
flutter: onHorizontalDragCancel
Copy the code

GestureDetector Drags gestures

There are five drag gestures, as follows:

field attribute describe
onPanDown GestureDragDownCallback The callback function when the finger is pressed
onPanStart GestureDragStartCallback The callback function when the finger begins to drag
onPanUpdate GestureDragUpdateCallback The callback function for finger movement
onPanEnd GestureDragEndCallback The callback function when the finger is raised
onPanCancel GestureDragCancelCallback The callback function when the finger is undragged

GestureDetector Drag gesture application scenario

Such as wechat’s global hover button

GestureDetector Dragging gestures example demonstration

We added the drag gesture to the Container as follows:

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  double _left = 0;
  double _top = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [

            // Drag gestures
            GestureDetector(
              onPanCancel: () {
                print("onPanCancel");
              },
              onPanDown: (details) {
                print("onPanDown---${details.globalPosition}---${details.localPosition}");
              },
              onPanEnd: (details) {
                print("onPanEnd---${details.velocity}---${details.primaryVelocity}");
              },
              onPanStart: (details) {
                print("onPanStart---${details.globalPosition}---${details.localPosition}");
              },
              onPanUpdate: (details) {
                print("onPanUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}");
                setState(() {
                  _left += details.delta.dx;
                  _top += details.delta.dy;
                });
              },
              child: Stack(
                children: [
                  Positioned(
                    left: _left,
                    top: _top,
                    child: Container(
                      width: 200,
                      height: 200,
                      color: Colors.orange,
                      alignment: Alignment.center,
                      child: Text("Jimi",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 30() [() [() [() [() [() [() [() [() }}Copy the code

GestureDetector drags gesture console output

One: Click on the Container Container
flutter: onPanDown---Offset(161.0.233.0)---Offset(161.0.157.0)
flutter: onPanStart---Offset(161.0.233.0)---Offset(161.0.157.0)
flutter: onPanEnd---Velocity(0.0.0.0)--0.0
Copy the code
Second: Drag a Container
flutter: onPanDown---Offset(123.5.193.5)---Offset(123.5.117.5)
flutter: onPanStart---Offset(123.5.193.5)---Offset(123.5.117.5)
flutter: onPanUpdate---Offset(123.5.193.0)---Offset(123.5.117.0)---Offset(0.0.0.5)
flutter: onPanUpdate---Offset(124.0.193.0)---Offset(124.0.117.0)---Offset(0.5.0.0)
flutter: onPanUpdate---Offset(124.5.192.0)---Offset(124.5.116.0)---Offset(0.5.1.0)
flutter: onPanUpdate---Offset(125.5.190.5)---Offset(125.5.114.5)---Offset(1.0.1.5)
flutter: onPanUpdate---Offset(126.0.190.0)---Offset(126.0.114.0)---Offset(0.5.0.5)
flutter: onPanUpdate---Offset(126.5.189.5)---Offset(126.5.113.5)---Offset(0.5.0.5)
flutter: onPanUpdate---Offset(127.0.189.0)---Offset(127.0.113.0)---Offset(0.5.0.5)
flutter: onPanEnd---Velocity(0.0.0.0)--0.0
Copy the code
Third: Drag the Container and release it immediately
flutter: onPanDown---Offset(5.5.162.5)---Offset(5.5.86.5)
flutter: onPanCancel
Copy the code

GestureDetector Zooming gestures

There are three zooming gestures, as follows:

field attribute describe
onScaleStart GestureScaleStartCallback The callback function to start scaling
onScaleUpdate GestureScaleUpdateCallback The callback function when scaling moves
onScaleEnd GestureScaleEndCallback The callback function at the end of the scaling

GestureDetector Application scenario of zooming gestures

If the picture needs to be reduced or enlarged

GestureDetector Zooming gesture demonstration case

We added the pinch gesture to the Container as follows:

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  double _left = 0;
  double _top = 0;
  double _widthAndHeight = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [
            /// Zoom gestures
            GestureDetector(
              onScaleEnd: (details) {
                print("onScaleEnd---${details.velocity}---${details.pointerCount}");
              },
              onScaleStart: (details) {
                print("onScaleStart---${details.focalPoint}---${details.pointerCount}");
              },
              onScaleUpdate: (details) {
                print("onScaleUpdate---${details.scale}---${details.scale.clamp(0.1.1.2)}");
                setState(() {
                  _widthAndHeight = 200 * details.scale.clamp(0.3.1.8);
                });
              },
              child: Container(
                width: _widthAndHeight,
                height: _widthAndHeight,
                color: Colors.orange,
                alignment: Alignment.center,
                child: Text("Jimi",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 30),),),)],),),); }}Copy the code
One: Click on the Container Container
flutter: onScaleStart---Offset(149.5.348.0)--- 1
flutter: onScaleEnd---Velocity(0.0.0.0)--0
Copy the code
Second: Drag a Container with one finger
flutter: onScaleStart---Offset(178.0.304.5)--- 1
flutter: onScaleUpdate--1.0--1.0
flutter: onScaleUpdate--1.0--1.0
flutter: onScaleUpdate--1.0--1.0
flutter: onScaleUpdate--1.0--1.0
flutter: onScaleEnd---Velocity(0.0.0.0)--0
Copy the code
Third: Zoom in and out Container with two fingers
flutter: onScaleStart---Offset(187.5.333.5)--2 -
flutter: onScaleUpdate--1.0055027720002572--1.0055027720002572
flutter: onScaleUpdate--1.0110087715145855--1.0110087715145855
flutter: onScaleUpdate--1.0293231946761667--1.0293231946761667
flutter: onScaleUpdate--1.04763763435052--1.04763763435052
flutter: onScaleUpdate--1.0531463022961167--1.0531463022961167
flutter: onScaleEnd---Velocity(0.0.0.0)--- 1
Copy the code

GestureDetector Other gestures

Pressure device trigger gesture with 3D Touch function

There are four gestures

field attribute describe
onForcePressStart GestureForcePressStartCallback A callback function when a finger is forced down
onForcePressPeak GestureForcePressPeakCallback The callback function for maximum finger pressure
onForcePressUpdate GestureForcePressUpdateCallback The callback function when the finger moves after being pressed
onForcePressEnd GestureForcePressEndCallback The callback function when the finger leaves

Auxiliary buttons trigger gestures

field attribute describe
onSecondaryTap GestureTapCallback The callback function when the auxiliary button is clicked
onSecondaryTapDown GestureTapDownCallback Callback function when the auxiliary button is pressed
onSecondaryTapUp GestureTapUpCallback Callback function when the auxiliary button is released
onSecondaryTapCancel GestureTapCancelCallback The auxiliary button cancels the callback function when clicked
onSecondaryLongPressDown GestureLongPressDownCallback The callback function when the auxiliary button is pressed
onSecondaryLongPressCancel GestureLongPressCancelCallback Auxiliary button long press to cancel the callback function
onSecondaryLongPress GestureLongPressCallback Helper button long callback function
onSecondaryLongPressStart GestureLongPressStartCallback The callback function when the auxiliary button is long pressed and begins dragging
onSecondaryLongPressMoveUpdate GestureLongPressMoveUpdateCallback Callback function when the auxiliary button is long pressed and moved
onSecondaryLongPressUp GestureLongPressUpCallback Callback function when the auxiliary button is long pressed and released
onSecondaryLongPressEnd GestureLongPressEndCallback Auxiliary button long press end drag callback function

Three-finger trigger gesture

field attribute describe
onTertiaryTapDown GestureTapDownCallback The callback function when three fingers are pressed
onTertiaryTapUp GestureTapUpCallback Three finger click callback function
onTertiaryTapCancel GestureTapCancelCallback Three refers to the callback function when cancelling
onTertiaryLongPressDown GestureLongPressDownCallback The callback function when three fingers are pressed down
onTertiaryLongPressCancel GestureLongPressCancelCallback Three finger long press cancel when the callback function
onTertiaryLongPress GestureLongPressCallback Three fingers long callback function
onTertiaryLongPressStart GestureLongPressStartCallback The callback function when you hold down and drag with three fingers
onTertiaryLongPressMoveUpdate GestureLongPressMoveUpdateCallback Three fingers long press and move the callback function
onTertiaryLongPressUp GestureLongPressUpCallback The callback function when three fingers are pressed and released
onTertiaryLongPressEnd GestureLongPressEndCallback Three-finger long press to end the drag callback function

Other attributes

field attribute describe
child Widget Child components
behavior HitTestBehavior How do you behave during hit tests
excludeFromSemantics bool Whether to exclude these gestures from the semantic tree defaults to false
dragStartBehavior DragStartBehavior How drag behavior is handled

conclusion

We use cases of Click, double click, long press, drag and zoom of GestureDetector to show their usage and application scenarios. We also describe the properties of other gestures such as pressure device gesture, auxiliary button and three-finger gesture. Gesture is a component that must be mastered to learn Flutter and can achieve many effects. Add gestures, global hover buttons, image zooming, and more to the container.