A widget that detects gestures.
Easy to use, lightweight gesture detector for Flutter apps.
- Detect tap gestures [Tap, DoubleTap, Scale(start, update, end), Long press, Move(start, update, end) and Scroll]
- All callbacks can be used simultaneously
- Customize: ignore tap event on double tap, change duration time to detect double tap or long-press
Add to pubspec.yaml:
dependencies: gesture_x_detector:Checkout the example at https://github.com/taodo2291/xgesture_flutter/tree/master/example/lib/main.dart
import 'package:flutter/material.dart'; import 'package:gesture_x_detector/gesture_x_detector.dart'; void main() { runApp( MaterialApp( home: XGestureExample(), ), ); } class XGestureExample extends StatefulWidget { @override _XGestureExampleState createState() => _XGestureExampleState(); } class _XGestureExampleState extends State<XGestureExample> { String lastEventName = 'Tap on screen'; @override Widget build(BuildContext context) { return XGestureDetector( child: Material( child: Center( child: Text( lastEventName, style: TextStyle(fontSize: 30), ), ), ), doubleTapTimeConsider: 300, longPressTimeConsider: 350, onTap: onTap, onDoubleTap: onDoubleTap, onLongPress: onLongPress, onLongPressEnd: onLongPressEnd, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, onMoveUpdate: onMoveUpdate, onScaleStart: onScaleStart, onScaleUpdate: onScaleUpdate, onScaleEnd: onScaleEnd, bypassTapEventOnDoubleTap: false, onLongPressMove: onLongPressMove, onScrollEvent: onScrollEvent, longPressMaximumRangeAllowed: 25, ); } void onScrollEvent(ScrollEvent event) { setLastEventName('onLongPressMove'); print('scrolling - pos: ${event.localPos} delta: ${event.scrollDelta}'); } void onLongPressMove(MoveEvent event) { setLastEventName('onLongPressMove'); print('onMoveUpdate - pos: ${event.localPos} delta: ${event.delta}'); } void onLongPressEnd() { setLastEventName('onLongPressEnd'); print('onLongPressEnd'); } void onScaleEnd() { setLastEventName('onScaleEnd'); print('onScaleEnd'); } void onScaleUpdate(ScaleEvent event) { setLastEventName('onScaleUpdate'); print( 'onScaleUpdate - changedFocusPoint: ${event.focalPoint} ; scale: ${event.scale} ;Rotation: ${event.rotationAngle}'); } void onScaleStart(initialFocusPoint) { setLastEventName('onScaleStart'); print('onScaleStart - initialFocusPoint: $initialFocusPoint'); } void onMoveUpdate(MoveEvent event) { setLastEventName('onMoveUpdate'); print('onMoveUpdate - pos: ${event.localPos} delta: ${event.delta}'); } void onMoveEnd(localPos) { setLastEventName('onMoveEnd'); print('onMoveEnd - pos: $localPos'); } void onMoveStart(localPos) { setLastEventName('onMoveStart'); print('onMoveStart - pos: $localPos'); } void onLongPress(TapEvent event) { setLastEventName('onLongPress'); print('onLongPress - pos: ${event.localPos}'); } void onDoubleTap(event) { setLastEventName('onDoubleTap'); print('onDoubleTap - pos: ' + event.localPos.toString()); } void onTap(event) { setLastEventName('onTap'); print('onTap - pos: ' + event.localPos.toString()); } void setLastEventName(String eventName) { setState(() { lastEventName = eventName; }); } } - Change DoubleTap and Long press detect
@override Widget build(BuildContext context) { return XGestureDetector( child: child, doubleTapTimeConsider: 300, //customize double tap time longPressTimeConsider: 400, //customize long press time longPressMaximumRangeAllowed: 25, //customize the long press behavior, the touch can be move a some pixels (25 is the distanceSquare, that mean we allow move 5 pixels) ); }- Ignore Tap in case Double Tap dectected
@override Widget build(BuildContext context) { return XGestureDetector( child: child, bypassTapEventOnDoubleTap: true, // default is false ); }- Allow move event after long press event fired without release pointer
@override Widget build(BuildContext context) { return XGestureDetector( child: child, bypassMoveEventAfterLongPress: false, // default is true ); }Checkout the Canvas playground example at https://github.com/taodo2291/xgesture_flutter/tree/master/example/lib/canvas_playground.dart
Viet Nguyen - taodo2291@gmail.com