gesture_x_detector

Description:

gesture x detector

gesture_x_detector #
A widget that detects gestures.
Easy to use, lightweight gesture detector for Flutter apps.
Features #

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

Getting Started #
Installation #
Add to pubspec.yaml:
dependencies:
gesture_x_detector:
copied to clipboard
Example #
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;
});
}
}

copied to clipboard
Customize #

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)
);
}
copied to clipboard

Ignore Tap in case Double Tap dectected

@override
Widget build(BuildContext context) {
return XGestureDetector(
child: child,
bypassTapEventOnDoubleTap: true, // default is false
);
}
copied to clipboard

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
);
}
copied to clipboard
Checkout the Canvas playground example at https://github.com/taodo2291/xgesture_flutter/tree/master/example/lib/canvas_playground.dart
Author #
Viet Nguyen - [email protected]