fix: floating view draggable gesture

grex-corp · Nov 6, 2023 · 934b188 · 934b188
1 parent 75c9ec2
commit 934b188
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.0.4
+
+* Fixed floating view draggable gesture
+
 ## 0.0.3
 
 * Improved README

diff --git a/lib/extensions/grx_alignment.extension.dart b/lib/extensions/grx_alignment.extension.dart
@@ -29,11 +29,11 @@ extension GrxAlignmentExtension on Alignment {
       Alignment.topLeft => Offset(left, top),
       Alignment.topCenter => Offset(centerWidth, top),
       Alignment.topRight => Offset(right, top),
-      Alignment.centerLeft => Offset(left, deviceSize.height / 2),
+      Alignment.centerLeft => Offset(left, centerHeight),
       Alignment.center => Offset(centerWidth, centerHeight),
-      Alignment.centerRight => Offset(right, deviceSize.height / 2),
+      Alignment.centerRight => Offset(right, centerHeight),
       Alignment.bottomLeft => Offset(left, bottom),
-      Alignment.bottomCenter => Offset(deviceSize.width / 2, bottom),
+      Alignment.bottomCenter => Offset(centerWidth, bottom),
       Alignment.bottomRight => Offset(right, bottom),
       _ => Offset(top, left),
     };

diff --git a/lib/handlers/grx_floating_view.handler.dart b/lib/handlers/grx_floating_view.handler.dart
@@ -15,18 +15,21 @@ class GrxFloatingViewHandler with ChangeNotifier {
   bool inFloatingViewMode = false;
   bool showSafeArea = true;
 
-  bool get overlayActive => _overlayEntry != null;
   GrxAspectRatio get aspectRatio => _options.style.aspectRatio;
   Size get size =>
       Size(_options.style.width, _options.style.width / aspectRatio.value);
   BorderRadius get borderRadius => _options.style.borderRadius;
+
   Duration get animationDuration => _options.style.animationDuration;
+
   Border? get border => _options.style.border;
   Offset get offset => getOffset(
         _options.position.alignment,
         size: size,
         offset: _options.position.offset,
       );
+
+  bool get overlayActive => _overlayEntry != null;
   bool get startWithFloatingViewOn => _options.startWithFloatingViewOn;
   bool get freeDrag => _options.freeDrag;
 
@@ -41,13 +44,11 @@ class GrxFloatingViewHandler with ChangeNotifier {
 
   enableFloatingView() {
     inFloatingViewMode = true;
-    print("$inFloatingViewMode enableFloatingView");
     notifyListeners();
   }
 
   disableFloatingView() {
     inFloatingViewMode = false;
-    print("$inFloatingViewMode disableFloatingView");
     notifyListeners();
   }
 
@@ -93,8 +94,6 @@ class GrxFloatingViewHandler with ChangeNotifier {
           )
           .distanceSquared;
 
-      print('Alignment: ${alignment.toString()} Distance: $distance');
-
       return AlignmentDistance(
         alignment: alignment,
         distance: distance,
@@ -114,5 +113,9 @@ class GrxFloatingViewHandler with ChangeNotifier {
     final Size? size,
     final Offset? offset,
   }) =>
-      alignment.offset(_context, size ?? this.size, offset: offset);
+      alignment.offset(
+        _context,
+        size ?? this.size,
+        offset: offset ?? _options.position.offset,
+      );
 }
diff --git a/lib/models/grx_position.model.dart b/lib/models/grx_position.model.dart
@@ -3,9 +3,9 @@ import 'package:flutter/widgets.dart';
 class GrxPosition {
   const GrxPosition({
     this.alignment = Alignment.bottomRight,
-    this.offset,
+    this.offset = const Offset(0, 0),
   });
 
   final Alignment alignment;
-  final Offset? offset;
+  final Offset offset;
 }
diff --git a/lib/services/grx_floating_view.service.dart b/lib/services/grx_floating_view.service.dart
@@ -8,42 +8,46 @@ class GrxFloatingViewService {
   GrxFloatingViewService({
     required final BuildContext context,
     final GrxFloatingViewOptions? options,
-  }) : handler = GrxFloatingViewHandler(
+  }) : _handler = GrxFloatingViewHandler(
           context,
           options ?? GrxFloatingViewOptions(),
         );
 
-  final GrxFloatingViewHandler handler;
+  final GrxFloatingViewHandler _handler;
 
-  bool get showSafeArea => handler.showSafeArea;
-  bool get inFloatingViewMode => handler.inFloatingViewMode;
-  bool get overlayActive => handler.overlayActive;
+  Listenable get handler => _handler;
+
+  bool get showSafeArea => _handler.showSafeArea;
+  bool get inFloatingViewMode => _handler.inFloatingViewMode;
+  bool get overlayActive => _handler.overlayActive;
 
   void putOverlay({
     required final Widget widget,
   }) {
-    handler.showSafeArea = true;
-    handler.disableFloatingView();
+    _handler.showSafeArea = true;
+    _handler.disableFloatingView();
 
     final overlayEntry = OverlayEntry(
       builder: (context) => GrxFloatingViewWidget(
-        handler: handler,
+        handler: _handler,
         onClear: () {
-          handler.removeOverlay();
+          _handler.removeOverlay();
         },
         child: widget,
       ),
     );
 
-    handler.insertOverlay(overlayEntry);
+    _handler.insertOverlay(overlayEntry);
 
     /// TODO: Improve startWithFloatingViewOn feature
-    if (handler.startWithFloatingViewOn) {
-      handler.enableFloatingView();
+    if (_handler.startWithFloatingViewOn) {
+      _handler.enableFloatingView();
     }
   }
 
-  void enableFloatingView() => handler.enableFloatingView();
+  void removeOverlay() => _handler.removeOverlay();
+
+  void enableFloatingView() => _handler.enableFloatingView();
 
-  void disableFloatingView() => handler.disableFloatingView();
+  void disableFloatingView() => _handler.disableFloatingView();
 }
diff --git a/lib/widgets/grx_floating_view.widget.dart b/lib/widgets/grx_floating_view.widget.dart
@@ -32,11 +32,7 @@ class _GrxFloatingViewWidgetState extends State<GrxFloatingViewWidget> {
   Offset _offset = Offset.zero;
 
   _onFloatingViewOn() {
-    print("true   ${handler.aspectRatio}");
-
     Future.delayed(const Duration(milliseconds: 100), () {
-      print("true   Future.microtask");
-
       handler.setShowSafeArea(false);
 
       setState(() {
@@ -64,8 +60,6 @@ class _GrxFloatingViewWidgetState extends State<GrxFloatingViewWidget> {
     return AnimatedBuilder(
         animation: handler,
         builder: (context, _) {
-          print("video_overlay_widget ${handler.inFloatingViewMode}");
-
           if (handler.inFloatingViewMode != _isFloatingViewOn) {
             _isFloatingViewOn = handler.inFloatingViewMode;
             if (_isFloatingViewOn) {
@@ -74,6 +68,7 @@ class _GrxFloatingViewWidgetState extends State<GrxFloatingViewWidget> {
               _onFloatingViewOff();
             }
           }
+
           return Stack(
             children: [
               AnimatedPositioned(
@@ -82,11 +77,6 @@ class _GrxFloatingViewWidgetState extends State<GrxFloatingViewWidget> {
                 top: _offset.dy,
                 child: Draggable(
                   feedback: const SizedBox.shrink(),
-                  onDragStarted: _isFloatingViewOn
-                      ? () {
-                          print("onDragStarted");
-                        }
-                      : null,
                   onDragUpdate: _isFloatingViewOn
                       ? (off) {
                           setState(() {
@@ -97,17 +87,13 @@ class _GrxFloatingViewWidgetState extends State<GrxFloatingViewWidget> {
                       : null,
                   onDragEnd: _isFloatingViewOn
                       ? (DraggableDetails details) {
-                          print("onDragEnd");
-
                           if (details.velocity.pixelsPerSecond.dx < -1000) {
                             widget.onClear();
                           } else if (!handler.freeDrag) {
                             final alignment = handler.calculateNearestAlignment(
                               offset: _offset,
                             );
 
-                            print('nearestAlignment: $alignment');
-
                             setState(() {
                               _offset = handler.getOffset(alignment);
                             });
@@ -127,7 +113,11 @@ class _GrxFloatingViewWidgetState extends State<GrxFloatingViewWidget> {
                       duration: handler.animationDuration,
                       child: ClipRRect(
                         borderRadius: handler.borderRadius,
-                        child: widget.child,
+                        child: handler.inFloatingViewMode
+                            ? IgnorePointer(
+                                child: widget.child,
+                              )
+                            : widget.child,
                       ),
                     ),
                   ),

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: grex_floating_view
-description: Flutter In App Floating View (Picture in Picture)
-version: 0.0.3
+description: Flutter In App Floating View (Picture in Picture mode)
+version: 0.0.4
 homepage: https://grex.com.br
 repository: https://github.com/grex-corp/grex_floating_view
 

diff --git a/sample/lib/main.dart b/sample/lib/main.dart
@@ -38,6 +38,7 @@ class _MyHomePageState extends State<MyHomePage> {
     options: GrxFloatingViewOptions(
       position: const GrxPosition(
         alignment: Alignment.bottomRight,
+        offset: Offset(0, 60),
       ),
       style: GrxFloatingViewStyle(
         border: Border.all(