Last active
September 14, 2022 06:14
-
-
Save guptahitesh121/ca7fa34d73b8b024823c85dd0c7f687d to your computer and use it in GitHub Desktop.
Flutter Sample code to detect 2 finger swipe vertically using `RawGestureDetector` and `MultiDragGestureRecognizer`.
This file contains hidden or 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'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Swipe Demo', | |
debugShowCheckedModeBanner: false, | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: SwipeDemo(), | |
); | |
} | |
} | |
class SwipeDemo extends StatefulWidget { | |
@override | |
SwipeDemoState createState() => SwipeDemoState(); | |
} | |
class SwipeDemoState extends State<SwipeDemo> { | |
Offset offset = Offset.zero; | |
@override | |
Widget build(BuildContext context) { | |
return SafeArea( | |
child: TwoFingerPointerWidget( | |
onUpdate: (details) { | |
setState(() { | |
offset += details.delta; | |
}); | |
}, | |
child: Container( | |
alignment: Alignment.center, | |
color: Colors.white, | |
child: Transform.translate( | |
offset: offset, | |
child: Container( | |
width: 100, | |
height: 100, | |
color: Colors.red, | |
), | |
), | |
), | |
), | |
); | |
} | |
} | |
class TwoFingerPointerWidget extends StatelessWidget { | |
final Widget child; | |
final OnUpdate onUpdate; | |
TwoFingerPointerWidget({this.child, this.onUpdate}); | |
@override | |
Widget build(BuildContext context) { | |
return RawGestureDetector( | |
gestures: <Type, GestureRecognizerFactory>{ | |
CustomVerticalMultiDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<CustomVerticalMultiDragGestureRecognizer>( | |
() => CustomVerticalMultiDragGestureRecognizer(), | |
(CustomVerticalMultiDragGestureRecognizer instance) { | |
instance.onStart = (Offset position) { | |
return CustomDrag(events: instance.events, onUpdate: onUpdate); | |
}; | |
}, | |
), | |
}, | |
child: child, | |
); | |
} | |
} | |
typedef OnUpdate(DragUpdateDetails details); | |
class CustomDrag extends Drag { | |
final List<PointerDownEvent> events; | |
final OnUpdate onUpdate; | |
CustomDrag({this.events, this.onUpdate}); | |
@override | |
void update(DragUpdateDetails details) { | |
super.update(details); | |
final delta = details.delta; | |
if (delta.dy.abs() > 0 && events.length == 2) { | |
onUpdate?.call(DragUpdateDetails( | |
sourceTimeStamp: details.sourceTimeStamp, | |
delta: Offset(0, delta.dy), | |
primaryDelta: details.primaryDelta, | |
globalPosition: details.globalPosition, | |
localPosition: details.localPosition, | |
)); | |
} | |
} | |
@override | |
void end(DragEndDetails details) { | |
super.end(details); | |
} | |
} | |
class CustomVerticalMultiDragGestureRecognizer extends MultiDragGestureRecognizer<_CustomVerticalPointerState> { | |
final List<PointerDownEvent> events = []; | |
@override | |
createNewPointerState(PointerDownEvent event) { | |
events.add(event); | |
return _CustomVerticalPointerState(event.position, onDisposeState: () { | |
events.remove(event); | |
}); | |
} | |
@override | |
String get debugDescription => 'custom vertical multidrag'; | |
} | |
typedef OnDisposeState(); | |
class _CustomVerticalPointerState extends MultiDragPointerState { | |
final OnDisposeState onDisposeState; | |
_CustomVerticalPointerState(Offset initialPosition, {this.onDisposeState}) : super(initialPosition); | |
@override | |
void checkForResolutionAfterMove() { | |
if (pendingDelta.dy.abs() > kTouchSlop) { | |
resolve(GestureDisposition.accepted); | |
} | |
} | |
@override | |
void accepted(GestureMultiDragStartCallback starter) { | |
starter(initialPosition); | |
} | |
@override | |
void dispose() { | |
onDisposeState?.call(); | |
super.dispose(); | |
} | |
} |
Hello, if you are still interested, I changed the code in order to work for the current version of flutter which is right now
Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d570e (11 days ago) • 2022-07-13 11:24:16 -0700
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2
If anyone is interested of sharing the updated code just leave me a message here or on my email [email protected]
@Robert12-git That would be really nice if you could share an up-to-date working example! :)
Updated version for the Flutter 3.0.5
https://gist.github.com/awaik/7d5b6d6ec644ae844a3740dddc990ed4
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am sorry @OrwaPog I can't help you with this. I am not in touch with Flutter anymore, from past 2 years. I will have to start from scratch again.