Last active
July 19, 2024 17:51
-
-
Save ChrisMarxDev/8f53b1d0e871529a247dfcecc8916b27 to your computer and use it in GitHub Desktop.
Pan Gesture Recogniser that differentiates between device types
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/gestures.dart'; | |
| import 'package:flutter/material.dart'; | |
| // pan gesture detector that only responds to specific device kinds | |
| // e.g. only responds to mouse drags but ignores trackpad drags | |
| class DeviceKindPanGestureDetector extends StatefulWidget { | |
| const DeviceKindPanGestureDetector({ | |
| required this.child, | |
| required this.onStart, | |
| required this.onUpdate, | |
| required this.onEnd, | |
| required this.supportedDevices, | |
| this.behavior, | |
| this.isActive = true, | |
| this.singlePointer = false, | |
| super.key, | |
| }); | |
| final Widget child; | |
| final void Function(DragStartDetails details) onStart; | |
| final void Function(DragUpdateDetails details) onUpdate; | |
| final void Function(DragEndDetails? details) onEnd; | |
| final Set<PointerDeviceKind> supportedDevices; | |
| final HitTestBehavior? behavior; | |
| final bool isActive; | |
| final bool singlePointer; | |
| @override | |
| State<DeviceKindPanGestureDetector> createState() => | |
| _DeviceKindPanGestureDetectorState(); | |
| } | |
| class _DeviceKindPanGestureDetectorState | |
| extends State<DeviceKindPanGestureDetector> { | |
| @override | |
| void didUpdateWidget(DeviceKindPanGestureDetector oldWidget) { | |
| super.didUpdateWidget(oldWidget); | |
| setState(() {}); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return RawGestureDetector( | |
| behavior: widget.behavior, | |
| gestures: <Type, GestureRecognizerFactory>{ | |
| PanGestureRecognizer: | |
| GestureRecognizerFactoryWithHandlers<PanGestureRecognizer>( | |
| () => PanGestureRecognizer( | |
| supportedDevices: widget.supportedDevices, | |
| ), | |
| (PanGestureRecognizer instance) { | |
| instance | |
| ..onStart = widget.isActive ? widget.onStart : null | |
| ..onUpdate = widget.isActive ? widget.onUpdate : null | |
| ..onEnd = widget.isActive ? widget.onEnd : null | |
| ..onCancel = widget.isActive ? () => widget.onEnd(null) : null; | |
| }, | |
| ), | |
| }, | |
| ); | |
| } | |
| } | |
| // Pan recognizer with click support | |
| class ClickExample extends StatelessWidget { | |
| const ClickExample({ | |
| super.key, | |
| }); | |
| @override | |
| Widget build(BuildContext context) { | |
| return DeviceKindPanGestureDetector( | |
| onStart: (start) { | |
| // start drawing | |
| }, | |
| onEnd: (end) { | |
| // stop drawing | |
| }, | |
| onUpdate: (update) { | |
| // update drawing | |
| }, | |
| supportedDevices: const { | |
| PointerDeviceKind.touch, | |
| PointerDeviceKind.mouse, | |
| }, | |
| child: Container(), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment