Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Panel's closing & draggable snapping #340

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/.flutter-plugins-dependencies
Original file line number Diff line number Diff line change
@@ -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"}
25 changes: 12 additions & 13 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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());

Expand Down Expand Up @@ -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),
]),
])
],
);
}
Expand Down
12 changes: 7 additions & 5 deletions example/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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:
Expand Down
117 changes: 109 additions & 8 deletions lib/src/panel.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 *
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
Expand All @@ -554,6 +639,7 @@ class _SlidingUpPanelState extends State<SlidingUpPanel>
}
}


void _flingPanelToPosition(double targetPos, double velocity) {
final Simulation simulation = SpringSimulation(
SpringDescription.withDampingRatio(
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down