FLUTTER Gesture
FLUTTER
Flutter gestures are primarily handled through the GestureDetector widget, which wraps any widget to make it interactive.
Flutter Gesture
➔ On mobile or any touch-based device, a user can interact with the application mainly using gesture widgets.
➔ The GestureDetector widget detects semantic actions like tap, drag, and scale by wrapping interactive UI elements that the user can physically interact with by tapping on them.
➔ Gesture generally refers to any physical action such as touching, tapping, or dragging on the screen of a mobile or any touch-based device.
Some of the most common and widely used gestures are given below
Tap: Touching and holding the device surface with the tip of your finger for a short time and then releasing your finger.
Double tap: Tapping twice in a short period of time.
Drag: Touching the surface of the device with the tip of a finger, then moving the finger steadily and finally releasing it.
Flick: Similar to dragging, but done at a faster speed.
Pinch: Pinch the surface of the device using two fingers.
Spread/Zoom:: The opposite of pinching (one finger moves away from the other).
Panning: Touching the surface of the device with the tip of a finger, moving it in any direction without releasing the finger.
Handling gesture events
➔ Flutter handles all types of gestures through the GestureDetector widget.
➔ The GestureDetector widget is a non-visual widget, which is mainly used to detect user gestures on mobile devices.
➔ The gesture can be applied to any specific widget by wrapping it with the GestrueDetector widget, so that the GestureDetector can work on that widget.
➔ The GestureDetector widget then captures and returns all events based on the gesture.
Some common gestures and associated events
The most common callbacks used for single tap gestures
onTapDown: This is triggered as soon as the user touches the screen.
onTapUp: This is triggered when the user stops touching the screen or lifts their finger off the screen.
onTap: Triggered when a sequence of onTapDown and onTapUp is successfully completed without the pointer moving too far.
onTapCancel: This is triggered when the pointer that triggered onTapDown will no longer cause a tap (e.g., if the user moves their finger or the gesture is interrupted).
Double tap gesture event
onDoubleTapDown: Triggered when the user touches the screen for the first time for a possible double-tap.
onDoubleTap: Triggered when the user taps the screen twice in quick succession in the same location.
onDoubleTapCancel: Triggered when an onDoubleTapDown does not result in a valid double-tap.
Long press gesture events
onLongPressDown: This is called when the pointer touches the screen, which could be for a long press.
onLongPress: This is triggered when a user touches the screen, holds their finger in the same place for a specified period of time, and then releases it.
onLongPressUp: This is triggered when the user stops touching after a long press.
The most common callbacks used for pan gestures
onPanDown: Triggered when a pointer touches the screen, potentially signaling the start of a pan.
onPanStart: This is triggered when a pointer touches the screen and starts moving.
onPanUpdate: This is triggered repeatedly as the pointer moves across the screen.
onPanEnd: This is triggered when the pointer moves off the screen after moving.
onPanCancel: Triggered when the pointer stops touching the screen without completing a pan (e.g., if another gesture takes over).
Vertical Drag Gesture Events
onVerticalDragDown: Triggered immediately when the user touches the screen with a pointer (finger or stylus), indicating that a vertical drag may occur next.
onVerticalDragStart: Triggered when a pointer comes into contact with the screen and starts moving specifically in a vertical direction.
onVerticalDragUpdate: This is triggered continuously when the pointer continues to move vertically while already in contact with the screen. This event provides detailed information about how far the user has dragged.
onVerticalDragEnd: Triggered when the vertically dragged pointer loses contact with the screen and provides information about its velocity.
onVerticalDragCancel: Triggered when an onVerticalDragDown event fails to result in a vertical drag, such as if the pointer moves horizontally instead or performs another gesture.
Horizontal Drag Gesture Events
onHorizontalDragDown: Triggered when the user touches the screen, indicating the start of a possible horizontal drag.
onHorizontalDragStart: This is triggered when the user touches and starts moving horizontally.
onHorizontalDragUpdate: This is triggered repeatedly when the finger moves horizontally across the screen. It provides details such as delta.dx to determine the speed and direction of movement.
onHorizontalDragEnd: Triggered when the user stops moving and lifts their finger off the screen, often used to determine the velocity of a fling.
onHorizontalDragCancel: This is triggered when an onHorizontalDragDown event does not result in a drag being completed (e.g., if the user moves vertically instead).