Panel's closing & draggable snapping

example/.flutter-plugins-dependencies

@@ -1 +1 @@
-{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/path_provider-1.6.28/","dependencies":[]},{"name":"sqflite","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+4/","dependencies":[]}],"android":[{"name":"path_provider","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/path_provider-1.6.28/","dependencies":[]},{"name":"sqflite","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+4/","dependencies":[]}],"macos":[{"name":"path_provider_macos","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/path_provider_macos-0.0.4+8/","dependencies":[]},{"name":"sqflite","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+4/","dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/path_provider_linux-0.0.1+2/","dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/Users/akshath/.pub-cache/hosted/pub.dartlang.org/path_provider_windows-0.0.5/","dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_macos","path_provider_linux","path_provider_windows"]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_macos","dependencies":[]},{"name":"path_provider_windows","dependencies":[]},{"name":"sqflite","dependencies":[]}],"date_created":"2021-04-26 22:43:13.474041","version":"2.0.5"}
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/path_provider_foundation-2.3.2/","shared_darwin_source":true,"native_build":true,"dependencies":[]},{"name":"sqflite","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/sqflite-2.3.2/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"android":[{"name":"path_provider_android","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/path_provider_android-2.2.2/","native_build":true,"dependencies":[]},{"name":"sqflite","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/sqflite-2.3.2/","native_build":true,"dependencies":[]}],"macos":[{"name":"path_provider_foundation","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/path_provider_foundation-2.3.2/","shared_darwin_source":true,"native_build":true,"dependencies":[]},{"name":"sqflite","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/sqflite-2.3.2/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/path_provider_linux-2.2.1/","native_build":false,"dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/Users/amirkhan/.pub-cache/hosted/pub.dev/path_provider_windows-2.2.1/","native_build":false,"dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]},{"name":"sqflite","dependencies":[]}],"date_created":"2024-02-24 08:47:52.125792","version":"3.19.0"}

example/lib/main.dart

@@ -8,13 +8,14 @@ Licensing: More information can be found here: https://github.com/akshathjain/sl
 
 import 'dart:ui';
 
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:latlong2/latlong.dart';
 import 'package:sliding_up_panel/sliding_up_panel.dart';
 import 'package:flutter/services.dart';
 
-import 'package:flutter_map/flutter_map.dart';
-import 'package:latlong/latlong.dart';
-import 'package:cached_network_image/cached_network_image.dart';
+
 
 void main() => runApp(SlidingUpPanelExample());
 
@@ -277,19 +278,17 @@ class _HomePageState extends State<HomePage> {
         zoom: 13,
         maxZoom: 15,
       ),
-      layers: [
-        TileLayerOptions(
-            urlTemplate: "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"),
-        MarkerLayerOptions(markers: [
+      children: [
+        MarkerLayer(markers: [
           Marker(
               point: LatLng(40.441753, -80.011476),
-              builder: (ctx) => Icon(
-                    Icons.location_on,
-                    color: Colors.blue,
-                    size: 48.0,
-                  ),
+              child: Icon(
+                Icons.location_on,
+                color: Colors.blue,
+                size: 48.0,
+              ),
               height: 60),
-        ]),
+        ])
       ],
     );
   }

example/pubspec.yaml

@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: '>=2.12.0 <3.0.0'
+  sdk: '>=3.2.3 <4.0.0'
 
 dependencies:
   flutter:
@@ -15,11 +15,13 @@ dependencies:
   sliding_up_panel:
     path: ../
 
-  flutter_map: ^0.8.2
-  latlong: ^0.6.1
-  cached_network_image: ^2.0.0
+  flutter_map: ^6.1.0
+  latlong2: ^0.9.0
+  #deprecated (Dart 3 incompatible)
+  #latlong: ^0.6.1
+  cached_network_image: ^3.3.1
 
-  cupertino_icons: ^0.1.2
+  cupertino_icons: ^1.0.6
 
 dev_dependencies:
   flutter_test:

lib/src/panel.dart

@@ -159,9 +159,28 @@ class SlidingUpPanel extends StatefulWidget {
   /// by default the Panel is open and must be swiped closed by the user.
   final PanelState defaultPanelState;
 
+  /// allow adding snapping on dragging the panel at different points
+  final bool allowDraggableSnappingBehaviour;
+
+  /// allow fully panel closing behaviour like Google Maps by setting this to
+  /// true, snapPoint value will be set to 0.3 by default. However you can set
+  /// it to whatever you like then.
+  ///
+  /// You can again open panel by using [PanelController]'s show() or open()
+  /// method.
+  final bool allowFullyPanelClosingBehaviour;
+
+
+  /// Add a custom resize handle to the sliding panel.
+  final Widget? resizeHandle;
+
+
   SlidingUpPanel(
       {Key? key,
       this.panel,
+        this.allowDraggableSnappingBehaviour = false,
+        this.allowFullyPanelClosingBehaviour = false,
+        this.resizeHandle,
       this.panelBuilder,
       this.body,
       this.collapsed,
@@ -312,9 +331,7 @@ class _SlidingUpPanelState extends State<SlidingUpPanel>
                   animation: _ac,
                   builder: (context, child) {
                     return Container(
-                      height:
-                          _ac.value * (widget.maxHeight - widget.minHeight) +
-                              widget.minHeight,
+                      height: widget.allowFullyPanelClosingBehaviour ? _ac.value * (widget.maxHeight - widget.minHeight) : _ac.value * (widget.maxHeight - widget.minHeight) + widget.minHeight,
                       margin: widget.margin,
                       padding: widget.padding,
                       decoration: widget.renderPanelSheet
@@ -424,6 +441,18 @@ class _SlidingUpPanelState extends State<SlidingUpPanel>
     super.dispose();
   }
 
+  Widget defaultResizeHandle() {
+    return Container(
+      margin: EdgeInsets.symmetric(vertical: 15),
+      height: 5.0,
+      width: 40.0,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(2.5),
+        color: Colors.grey[400],
+      ),
+    );
+  }
+
   double _getParallax() {
     if (widget.slideDirection == SlideDirection.UP)
       return -_ac.value *
@@ -491,6 +520,61 @@ class _SlidingUpPanelState extends State<SlidingUpPanel>
 
   // handles when user stops sliding
   void _onGestureEnd(Velocity v) {
+    if (widget.allowDraggableSnappingBehaviour) {
+      _applySnappingBehavior(v);
+    } else {
+      applyImmediateSnapBehaviour(v);
+    }
+  }
+
+  void _applySnappingBehavior(Velocity v) {
+
+    double minFlingVelocity = 365.0;
+
+    // let the current animation finish before starting a new one
+    if (_ac.isAnimating) return;
+
+    // if the panel is open and scrolling is enabled, we don't want to close it
+    if (_isPanelOpen && _scrollingEnabled) return;
+
+    // check if the velocity is sufficient for a fling
+    double visualVelocity =
+        -v.pixelsPerSecond.dy / (widget.maxHeight - widget.minHeight);
+
+    // reverse visual velocity to account for slide direction
+    if (widget.slideDirection == SlideDirection.DOWN) {
+      visualVelocity = -visualVelocity;
+    }
+
+    // Step 1: Define your snap points
+    List<double> snapPoints = [0.0, 0.50, 0.1, 0.150, 0.2, 0.250, 0.3, 0.350, 0.4, 0.450, 0.5, 0.550, 0.6, 0.650, 0.7, 0.750, 0.8, 0.850, 0.9, 0.950, 1.0];
+
+    // Step 2: Calculate the closest snap point
+    double closestSnapPoint = snapPoints.reduce((a, b) {
+      return (a - _ac.value).abs() < (b - _ac.value).abs() ? a : b;
+    });
+
+    // Step 3: Use closestSnapPoint for snapping
+    if (widget.panelSnapping) {
+      if (v.pixelsPerSecond.dy.abs() >= minFlingVelocity) {
+        // Snap to the closest point when fling velocity is high enough
+        _flingPanelToPosition(closestSnapPoint, visualVelocity);
+      } else {
+        // Snap to closest point with no velocity
+        _flingPanelToPosition(closestSnapPoint, 0);
+      }
+    } else {
+      // Existing non-snapping behavior
+      if(mounted)
+        _ac.animateTo(
+          _ac.value + visualVelocity * 0.16,
+          duration: Duration(milliseconds: 410),
+          curve: Curves.decelerate,
+        );
+    }
+  }
+
+  void applyImmediateSnapBehaviour(Velocity v) {
     double minFlingVelocity = 365.0;
     double kSnap = 8;
 
@@ -532,11 +616,12 @@ class _SlidingUpPanelState extends State<SlidingUpPanel>
 
         // panel snapping disabled
       } else {
-        _ac.animateTo(
-          _ac.value + visualVelocity * 0.16,
-          duration: Duration(milliseconds: 410),
-          curve: Curves.decelerate,
-        );
+        if(mounted)
+          _ac.animateTo(
+            _ac.value + visualVelocity * 0.16,
+            duration: Duration(milliseconds: 410),
+            curve: Curves.decelerate,
+          );
       }
 
       return;
@@ -554,6 +639,7 @@ class _SlidingUpPanelState extends State<SlidingUpPanel>
     }
   }
 
+
   void _flingPanelToPosition(double targetPos, double velocity) {
     final Simulation simulation = SpringSimulation(
         SpringDescription.withDampingRatio(
@@ -600,6 +686,15 @@ class _SlidingUpPanelState extends State<SlidingUpPanel>
     });
   }
 
+  Future<void> _showAt(double value) async {
+    if(mounted)
+      _ac.animateTo(value).then((x) {
+        setState(() {
+          _isPanelVisible = true;
+        });
+      });
+  }
+
   //animate the panel position to value - must
   //be between 0.0 and 1.0
   Future<void> _animatePanelToPosition(double value,
@@ -683,6 +778,12 @@ class PanelController {
     return _panelState!._show();
   }
 
+  /// Show the sliding panel on desired point between 0.0 to 1.0
+  Future<void> showAt(double value) {
+    assert(isAttached, "PanelController must be attached to a SlidingUpPanel");
+    return _panelState!._showAt(value);
+  }
+
   /// Animates the panel position to the value.
   /// The value must between 0.0 and 1.0
   /// where 0.0 is fully collapsed and 1.0 is completely open.

pubspec.yaml

@@ -4,7 +4,7 @@ version: 2.0.0+1
 homepage: https://github.com/akshathjain/sliding_up_panel
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
+  sdk: '>=3.2.3 <4.0.0'
 
 dependencies:
   flutter: