Skip to content

Instantly share code, notes, and snippets.

@guptahitesh121
Last active September 14, 2022 06:14
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save guptahitesh121/ca7fa34d73b8b024823c85dd0c7f687d to your computer and use it in GitHub Desktop.
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`.
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();
}
}
@guptahitesh121
Copy link
Author

TwoFingerSwipe

@OrwaPog
Copy link

OrwaPog commented May 25, 2022

Can you update the code to match the latest version of flutter , that would be very helpful

@guptahitesh121
Copy link
Author

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.

@Robert12-git
Copy link

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 ciurea.robert01@gmail.com

@merlijnvanlent
Copy link

@Robert12-git That would be really nice if you could share an up-to-date working example! :)

@awaik
Copy link

awaik commented Aug 17, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment