🔥 listen

Author: June

CHANGELOG.md

@@ -1,3 +1,7 @@
 ## 0.0.1
 
 * initial
+
+## 0.0.2
+
+* add listen mode

README.md

@@ -7,7 +7,7 @@
 https://user-images.githubusercontent.com/9412501/159013153-79af72be-30e9-4d92-b34e-7af11c772812.mp4
 
 # how to use
-[![pub](https://img.shields.io/badge/pub-v0.0.1-green)](https://pub.dev/packages/parallaxj)
+[![pub](https://img.shields.io/badge/pub-v0.0.2-green)](https://pub.dev/packages/parallaxj)
 ```dart
 Parallaxable(
     offsetRadio: 1.0 / 10,

example/.packages

@@ -3,7 +3,7 @@
 # 
 # For more info see: https://dart.dev/go/dot-packages-deprecation
 # 
-# Generated by pub on 2022-03-07 23:42:01.403198.
+# Generated by pub on 2022-03-30 23:20:46.643555.
 async:file:///C:/Users/jiang/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/async-2.8.2/lib/
 boolean_selector:file:///C:/Users/jiang/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
 characters:file:///C:/Users/jiang/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/characters-1.2.0/lib/

lib/src/parallax_touch.dart

@@ -10,6 +10,7 @@ class Parallaxable extends StatefulWidget {
   final double rotateDiff;
   final Widget above;
   final Widget under;
+  final bool listen;
 
   const Parallaxable({
     Key? key,
@@ -19,6 +20,7 @@ class Parallaxable extends StatefulWidget {
     this.rotateDiff = 1.1,
     this.offsetRadio = 1.0 / 6,
     this.offsetDepth = 2,
+    this.listen = false,
   }) : super(key: key);
 
   @override
@@ -55,63 +57,76 @@ class _ParallaxableState extends State<Parallaxable> with SingleTickerProviderSt
         builder: (BuildContext context, Widget? child) {
           final double rotatex = widget.angle * _aniController.value * xpercent;
           final double rotatey = widget.angle * _aniController.value * ypercent;
-          final double translatex =
-              widget.offsetRadio == 0 ? 0 : _aniController.value * halfHeight * widget.offsetRadio * ypercent * -1;
+          final double translatex = widget.offsetRadio == 0
+              ? 0
+              : _aniController.value * halfHeight * widget.offsetRadio * ypercent * -1;
           // double translatex = _aniController.value * halfHeight * widget.offsetRadio * ypercent;
           final double translatey =
               widget.offsetRadio == 0 ? 0 : _aniController.value * halfWidth * widget.offsetRadio * xpercent;
-          return GestureDetector(
-            onPanEnd: _panEnd,
-            onPanUpdate: _panUpdate,
-            onTapUp: _tapUp,
-            onPanDown: _panDown,
-            child: Stack(
-              children: [
-                Transform(
-                    transform: Matrix4.identity()
-                      ..setEntry(3, 2, 0.001)
-                      ..rotateY(rotatey)
-                      ..rotateX(rotatex),
-                    alignment: Alignment.center,
-                    child: widget.under),
-                Transform(
+          final stack = Stack(
+            children: [
+              Transform(
                   transform: Matrix4.identity()
                     ..setEntry(3, 2, 0.001)
-                    ..rotateY(rotatey / widget.rotateDiff)
-                    ..translate(translatex, translatey, widget.offsetDepth)
-                    ..rotateX(rotatex / widget.rotateDiff),
+                    ..rotateY(rotatey)
+                    ..rotateX(rotatex),
                   alignment: Alignment.center,
-                  child: widget.above,
-                ),
-              ],
-            ),
+                  child: widget.under),
+              Transform(
+                transform: Matrix4.identity()
+                  ..setEntry(3, 2, 0.001)
+                  ..rotateY(rotatey / widget.rotateDiff)
+                  ..translate(translatex, translatey, widget.offsetDepth)
+                  ..rotateX(rotatex / widget.rotateDiff),
+                alignment: Alignment.center,
+                child: widget.above,
+              ),
+            ],
+          );
+          if (widget.listen) {
+           return Listener(
+              onPointerMove: (event) => _panUpdate(event.localPosition.dx, event.localPosition.dy),
+              onPointerCancel: (event) => _panEnd(),
+              onPointerDown: (event) => _panDown(event.localPosition.dx, event.localPosition.dy),
+              onPointerUp: (event) => _tapUp(),
+              child: stack,
+            );
+          }
+
+          return GestureDetector(
+            onPanCancel: _panEnd,
+            onPanEnd: (event) => _panEnd(),
+            onPanUpdate: (event) => _panUpdate(event.localPosition.dx, event.localPosition.dy),
+            onTapUp: (event) => _tapUp(),
+            onPanDown: (event) => _panDown(event.localPosition.dx, event.localPosition.dy),
+            child: stack,
           );
         },
         animation: _aniController,
       );
     });
   }
 
-  void _panUpdate(DragUpdateDetails details) {
+  void _panUpdate(double dx, double dy) {
     setState(() {
-      ypercent = ((halfWidth - details.localPosition.dx) / halfWidth).clamp(-1, 1);
-      xpercent = ((details.localPosition.dy - halfHeight) / halfHeight).clamp(-1, 1);
+      ypercent = ((halfWidth - dx) / halfWidth).clamp(-1, 1);
+      xpercent = ((dy - halfHeight) / halfHeight).clamp(-1, 1);
     });
   }
 
-  void _panDown(DragDownDetails details) {
+  void _panDown(double dx, double dy) {
     _aniController.forward();
     setState(() {
-      ypercent = (halfWidth - details.localPosition.dx) / halfWidth;
-      xpercent = (details.localPosition.dy - halfHeight) / halfHeight;
+      ypercent = (halfWidth - dx) / halfWidth;
+      xpercent = (dy - halfHeight) / halfHeight;
     });
   }
 
-  void _tapUp(TapUpDetails details) {
+  void _tapUp() {
     _aniController.reverse();
   }
 
-  void _panEnd(DragEndDetails details) {
+  void _panEnd() {
     _aniController.reverse();
   }
 }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: parallaxj
 description: A new Flutter project.
-version: 0.0.1
+version: 0.0.2
 homepage: https://github.com/ZuYun/parallaxj
 
 environment: