introduce

The GestureDetector is the GestureDetector of a Flutter that attempts to identify gestures corresponding to its non-null callback. If the Widget component has a child control, its resizing behavior follows that child control. If it has no child control, it grows to fit the parent control.

Gesture detectors with invisible child controls ignore touches by default; You can control this logic through behavior. The GestureDetector also listens for accessible events and maps them to callback callbacks. To ignore accessible events, set ExcludeFromSemantics to true.

The gesture system in Flutter has two separate layers. The first layer is the primitive pointer event, which describes the position and movement of Pointers (for example, touch, mouse, and stylus) on the screen. The second layer is gesture, which describes the semantic actions composed of one or more pointer movements, such as drag, zoom, double click, long press, etc.

gestures

In FLUTTER, gestures represent semantic actions (such as clicking, dragging, and zooming) that can be recognized from multiple individual pointer events (or even multiple individual Pointers). A complete gesture can distribute multiple events corresponding to the lifecycle of the gesture (for example, drag start, drag update, and drag end) :

  • Click on the

    • The onTapDown pointer already touches the screen at a specific location
    • The onTapUp pointer stops touching the screen at a specific location
    • OnTap The click event is triggered
    • OnTapCancel The onTapDown triggered by the previous pointer will not trigger the click event

  • Double click on the

    • The onDoubleTap user taps the screen twice in quick succession in the same spot.

  • Long press

    • The onLongPress pointer remains in contact with the screen in the same position for a long time

  • Vertical drag

    • The onVerticalDragStart pointer is already in contact with the screen and may start moving vertically
    • The onVerticalDragUpdate pointer is in contact with the screen and has moved vertically.
    • OnVerticalDragEnd The pointer that previously touched the screen and moved vertically no longer touches the screen and moves at a specific speed when it stops touching the screen

  • Horizontal dragging

    • The onHorizontalDragStart pointer has touched the screen and may start moving horizontally
    • The onHorizontalDragUpdate pointer touches the screen and has moved horizontally
    • OnHorizontalDragEnd The pointer that previously touched the screen and moved horizontally no longer touches the screen and moves at a specific speed when it stops touching the screen

Inheritance relationships

Diagnosticable – > DiagnosticableTree – > Widget – > StatelessWidget – > GestureDetector

The constructor

 Draggable({Key key, 
 @required Widget child,
 @required Widget feedback,
 T data, 
 Axis axis,
 Widget childWhenDragging,
 Offset feedbackOffset: Offset.zero, 
 DragAnchor dragAnchor: DragAnchor.child, 
 Axis affinity, 
 int maxSimultaneousDrags,
 VoidCallback onDragStarted, 
 DraggableCanceledCallback onDraggableCanceled, 
 DragEndCallback onDragEnd, 
 VoidCallback onDragCompleted, 
 bool ignoringFeedbackSemantics: true }) 
Copy the code

Commonly used attributes

  • DragStartBehavior → dragStartBehavior Determines how to handle the drag-start behavior

  • ExcludeFromSemantics → bool Whether to exclude these gestures from the semantic tree.

    For example, a long-press gesture for displaying a tooltip is excluded because the tooltip itself is directly contained in the semantic tree, so having a gesture to display it would result in duplication of information.

  • OnDoubleTap → GestureTapCallback The user has tapped the screen twice in quick succession using the home button in the same location.

  • OnForcePressEnd – GestureForcePressEndCallback pointer is no longer in contact with the screen.

  • OnForcePressPeak – GestureForcePressPeakCallback pointer in contact with the screen and in the most vigorously press. Power is at least ForcePressGestureRecognizer peakPressure.

  • OnForcePressStart – GestureForcePressStartCallback pointer contact with screen, press to start the pressure with enough force. Power is at least ForcePressGestureRecognizer startPressure.

  • OnForcePressUpdate – GestureForcePressUpdateCallback pointer contact with the screen, already passed the ForcePressGestureRecognizer. StartPressure, And either move across the flat surface of the screen, press the screen with different forces, or press both screens at once.

  • OnHorizontalDragCancel – GestureDragCancelCallback trigger onHorizontalDragDown pointer previously unfinished triggered off.

  • OnHorizontalDragDown → GestureDragDownCallback pointer has touched the screen through the main button and may begin to move horizontally.

  • OnHorizontalDragEnd → GestureDragEndCallback The pointer that previously touched the home screen and moved horizontally no longer touches the screen and moves at a specific speed when it stops touching the screen.

  • OnHorizontalDragStart → GestureDragStartCallback is in contact with the screen through the main button and begins to move horizontally.

  • OnHorizontalDragUpdate – GestureDragUpdateCallback level of contact with the home button and move the pointer to the move in a horizontal direction.

  • OnLongPress → GestureLongPressCallback is called when a long-press gesture with a main button is recognized.

  • OnLongPressEnd – GestureLongPressEndCallback use master button trigger long press pointer has stopped touch screen.

  • OnLongPressMoveUpdate – GestureLongPressMoveUpdateCallback use master button after long press, pointer has been dragging.

  • OnLongPressStart – GestureLongPressStartCallback when identify with the main button long-press gestures when called.

  • OnLongPressUp – GestureLongPressUpCallback use master button trigger long press pointer has stopped touch screen.

  • OnPanCancel – GestureDragCancelCallback previously trigger onPanDown pointer unfinished.

  • The onPanDown → GestureDragDownCallback pointer has touched the screen through the main button and may begin to move.

  • OnPanEnd → GestureDragEndCallback The pointer that previously touched the screen through the main button and moved no longer touches the screen, and moves at a specific speed when it stops touching the screen.

  • OnPanStart → GestureDragStartCallback The touch point contacts the screen and has started to move.

  • OnPanUpdate – GestureDragUpdateCallback touch point location on the screen every time change, will trigger the callback.

  • OnScaleEnd → GestureScaleEndCallback pointer no longer touches the screen.

  • OnScaleStart – GestureScaleStartCallback contact with screen pointer focus have been established, the initial ratio of 1.0.

  • OnScaleUpdate – GestureScaleUpdateCallback pointer says the new focus in contact with the screen and/or proportion.

  • OnSecondaryTapCancel → GestureTapCancelCallback The pointer that triggered onSecondaryTapDown previously will not result in a click.

  • OnSecondaryTapDown → GestureTapDownCallback may cause the pointer struck with the secondary button to contact the screen at a specific location.

  • OnSecondaryTapUp → GestureTapUpCallback will trigger the stroke of the pointer with an auxiliary button that has stopped touching the screen at a specific location.

  • OnTap → GestureTapCallback Trigger source of the click event with the main button.

  • OnTapCancel → GestureTapCancelCallback The pointer that previously triggered onTapDown will not result in a click.

  • OnTapDown → GestureTapDownCallback may result in a pointer hit with the main button already contacting the screen at a specific location.

  • OnTapUp → GestureTapUpCallback will trigger the hitting pointer with the primary button that has stopped touching the screen at a specific location.

  • OnVerticalDragCancel – GestureDragCancelCallback previously trigger onVerticalDragDown pointer unfinished.

  • The onVerticalDragDown → GestureDragDownCallback pointer has touched the screen through the main button and may begin to move vertically.

  • OnVerticalDragEnd → GestureDragEndCallback A pointer that previously touched the home screen and moved vertically no longer touches the screen and moves at a specific speed when it stops touching the screen.

  • The onVerticalDragStart → GestureDragStartCallback pointer has touched the screen through the main button and has started to move vertically.

  • OnVerticalDragUpdate – GestureDragUpdateCallback contact with the home button and the vertical movement of the pointer in the vertical direction moves.

Commonly used method

  • Build (BuildContext Context) → Widget creates components.
  • DebugFillProperties (DiagnosticPropertiesBuilder properties) – > void add other attributes associated with the node.
  • CreateElement () → StatelessElement Creates StatelessElement to manage the position of this component in the UI tree.

Use the sample

1. Click, double-click, or hold down

In this demo, gesture recognition is performed on the Container component using GestureDetector. After the event is triggered, the event name is displayed on the Container. To increase the click area, set the Container to 200×200 with the following code:

import 'package:flutter/material.dart';

class GestureDetectorTestRoute extends StatefulWidget {
  @override
  _GestureDetectorTestRouteState createState() =>
      new _GestureDetectorTestRouteState();
}

class _GestureDetectorTestRouteState extends State<GestureDetectorTestRoute> {
  String _operation = "No Gesture detected!"; 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("GestureDetectorTest"), ), body: Center( child: GestureDetector( child: Container( alignment: Alignment.center, color: Colors.blue, width: 200.0, height: 200.0, child: Text(_operation, style: TextStyle(color: Colors. White, fontSize: 14, decoration: TextDecoration.none), ), ), onTap: () => updateText("onTap"), // Click onDoubleTap: () => updateText("onDoubleTap"// Double-click onLongPress: () => updateText()"onLongPress"), // Long press),),); } // updateText void updateText(String text) {setState(() { _operation = text; }); / / hint showSnackBar (text); } var _scaffoldKey = new GlobalKey<ScaffoldState>(); void showSnackBar(String message) { var snackBar = SnackBar( content: Text(message), backgroundColor: Colors.lightGreen, duration: Duration(milliseconds: 400)); _scaffoldKey.currentState.showSnackBar(snackBar); }}Copy the code

The renderings are as follows:

Note: If both onTap and onDoubleTap events are listened for, there will be a delay of about 200 milliseconds when the tap event is triggered by the user. This is because after the user clicks, it is likely to click again to trigger a double click event, so the GestureDetector source code will wait 200 milliseconds to determine whether it is a double click event. If the user only listens for onTap events (not onDoubleTap), the callback is not delayed.

2. Drag and slide events

import 'package:flutter/material.dart'; class DragTest extends StatefulWidget { @override _DragTestState createState() => new _DragTestState(); } class _DragTestState extends the State < DragTest > with SingleTickerProviderStateMixin {double _top = 0.0; // Offset from top double _left = 0.0; Override Widget Build (BuildContext context) {return Scaffold(
      appBar: AppBar(
        title: Text("DragTest"),
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
            top: _top,
            left: _left,
            child: GestureDetector(
              child: CircleAvatar(
                  child: Text("Draggable Text", textAlign: textalign.center), radius: 50), // This callback is triggered when the finger is pressed onPanDown: (DragDownDetails e) {// Prints the finger pressed position (screen)print("User finger presses:${e.globalPosition}"); }, // This callback is triggered when the finger is swiped onPanUpdate: (DragUpdateDetails e) {// When the user is swiped, the offset is updated and rebuiltsetState(() { _left += e.delta.dx; _top += e.delta.dy; }); }, onPanEnd: (DragEndDetails e) {// Prints the speed at the end of the slide on the x and y axesprint(e.velocity); },),) [,),); }}Copy the code

The renderings are as follows:

3. Zoom events

In addition to click/double click/drag events, GestureDetector can listen for zoom events. Here we demonstrate a simple image zoom effect, the sample code is as follows:

Class _ScaleTestRouteState extends State<_ScaleTestRoute> {double _width = 200.0; @override Widget build(BuildContext context) {returnCenter(Child: GestureDetector(// Specify width, height adaptive child: image.asset ("./images/sea.png", width: _width),
        onScaleUpdate: (ScaleUpdateDetails details) {
          setState(() {// Zoom between 0.8 and 10 times _width=200*details.scale.clamp(.8, 10.0); }); },),); }}Copy the code

The renderings are as follows:

conclusion

In this article, we learned about the basic concepts and capabilities of flutter’s GestureDetector GestureDetector. It encapsulates a number of apis that allow us to develop applications efficiently and quickly. Through the content of this article, we know how to listen to click/double click/drag events and handle user interaction logic. Of course, event competition and event conflict will inevitably occur in the touch interaction model. Due to the length of this article, we will not explain them. In the next article, we will focus on event competition and event conflict in FLUTTER.

The author



xiaosongzeem