Merge pull request #26 from akshathjain/dev

Added SlideDirection property

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.3.4] - [April 15, 2019]
+
+#### Features
+- Added `slideDirection` property that changes how the panel slides open (either up or down)
+
+#### Documentation
+- Updated the documentation to reflect new features
+
+
 ## [0.3.3] - [April 6, 2019]
 
 #### Features

README.md

@@ -1,9 +1,9 @@
 # sliding_up_panel
 [![pub package](https://img.shields.io/pub/v/sliding_up_panel.svg)](https://pub.dartlang.org/packages/sliding_up_panel)
-[![GitHub Star](https://img.shields.io/github/stars/akshathjain/sliding_up_panel.svg)](https://github.com/akshathjain/sliding_up_panel)
+[![GitHub Stars](https://img.shields.io/github/stars/akshathjain/sliding_up_panel.svg?logo=github)](https://github.com/akshathjain/sliding_up_panel)
 [![Platform](https://img.shields.io/badge/platform-android%20|%20ios-green.svg)](https://img.shields.io/badge/platform-Android%20%7C%20iOS-green.svg)
 
-A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!
+A draggable Flutter widget that makes implementing a SlidingUpPanel much easier! Based on the Material Design bottom sheet component, this widget works on both Android & iOS.
 
 <p>
   <img width="205px" alt="Example" src="https://raw.githubusercontent.com/akshathjain/sliding_up_panel/master/screenshots/example.gif"/>
@@ -15,9 +15,9 @@ A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!
 
 ## Installing
 Add the following to your `pubspec.yaml` file:
-```
+```yaml
 dependencies:
-  sliding_up_panel: ^0.3.3
+  sliding_up_panel: ^0.3.4
 ```
 
 <br>
@@ -116,6 +116,7 @@ There are several options that allow for more control:
 | `parallaxEnabled` | If non-null and true, the SlidingUpPanel exhibits a parallax effect as the panel slides up. Essentially, the body slides up as the panel slides up. |
 | `parallaxOffset` | Allows for specifying the extent of the parallax effect in terms of the percentage the panel has slid up/down. Recommended values are within 0.0 and 1.0 where 0.0 is no parallax and 1.0 mimics a one-to-one scrolling effect. Defaults to a 10% parallax. |
 | `isDraggable` | Allows toggling of draggability of the SlidingUpPanel. Set this to false to prevent the user from being able to drag the panel up and down. Defaults to true. |
+| `slideDirection` | Either `SlideDirection.UP` or `SlideDirection.DOWN`. Indicates which way the panel should slide. Defaults to `UP`. If set to `DOWN`, the panel attaches itself to the top of the screen and is fully opened when the user swipes down on the panel. |
 
 <br>
 <br>

lib/src/panel.dart

@@ -8,6 +8,11 @@ Licensing: More information can be found here: https://github.com/akshathjain/sl
 
 import 'package:flutter/material.dart';
 
+enum SlideDirection{
+  UP,
+  DOWN,
+}
+
 class SlidingUpPanel extends StatefulWidget {
 
   /// The Widget that slides into view. When the
@@ -104,11 +109,17 @@ class SlidingUpPanel extends StatefulWidget {
   /// one-to-one scrolling effect. Defaults to a 10% parallax.
   final double parallaxOffset;
 
-  /// Allows toggling of draggability of the SlidingUpPanel.
+  /// Allows toggling of the draggability of the SlidingUpPanel.
   /// Set this to false to prevent the user from being able to drag
   /// the panel up and down. Defaults to true.
   final bool isDraggable;
 
+  /// Either SlideDirection.UP or SlideDirection.DOWN. Indicates which way
+  /// the panel should slide. Defaults to UP. If set to DOWN, the panel attaches
+  /// itself to the top of the screen and is fully opened when the user swipes
+  /// down on the panel.
+  final SlideDirection slideDirection;
+
   SlidingUpPanel({
     Key key,
     @required this.panel,
@@ -140,6 +151,7 @@ class SlidingUpPanel extends StatefulWidget {
     this.parallaxEnabled = false,
     this.parallaxOffset = 0.1,
     this.isDraggable = true,
+    this.slideDirection = SlideDirection.UP
   }) : assert(0 <= backdropOpacity && backdropOpacity <= 1.0),
        super(key: key);
 
@@ -188,13 +200,13 @@ class _SlidingUpPanelState extends State<SlidingUpPanel> with SingleTickerProvid
   @override
   Widget build(BuildContext context) {
     return Stack(
-      alignment: Alignment.bottomCenter,
+      alignment: widget.slideDirection == SlideDirection.UP ? Alignment.bottomCenter : Alignment.topCenter,
       children: <Widget>[
 
 
         //make the back widget take up the entire back side
         widget.body != null ? Positioned(
-          top: widget.parallaxEnabled ? (- _ac.value * (widget.maxHeight - widget.minHeight) * widget.parallaxOffset) : 0.0,
+          top: widget.parallaxEnabled ? _getParallax() : 0.0,
           child: Container(
             height: MediaQuery.of(context).size.height,
             width: MediaQuery.of(context).size.width,
@@ -240,7 +252,8 @@ class _SlidingUpPanelState extends State<SlidingUpPanel> with SingleTickerProvid
 
                 //open panel
                 Positioned(
-                  top: 0.0,
+                  top: widget.slideDirection == SlideDirection.UP ? 0.0 : null,
+                  bottom: widget.slideDirection == SlideDirection.DOWN ? 0.0 : null,
                   width:  MediaQuery.of(context).size.width -
                           (widget.margin != null ? widget.margin.horizontal : 0) -
                           (widget.padding != null ? widget.padding.horizontal : 0),
@@ -251,16 +264,23 @@ class _SlidingUpPanelState extends State<SlidingUpPanel> with SingleTickerProvid
                 ),
 
                 // collapsed panel
-                Container(
-                  height: widget.minHeight,
-                  child: Opacity(
-                    opacity: 1.0 - _ac.value,
-
-                    // if the panel is open ignore pointers (touch events) on the collapsed
-                    // child so that way touch events go through to whatever is underneath
-                    child: IgnorePointer(
-                      ignoring: _isPanelOpen(),
-                      child: widget.collapsed ?? Container(),
+                Positioned(
+                  top: widget.slideDirection == SlideDirection.UP ? 0.0 : null,
+                  bottom: widget.slideDirection == SlideDirection.DOWN ? 0.0 : null,
+                  width:  MediaQuery.of(context).size.width -
+                          (widget.margin != null ? widget.margin.horizontal : 0) -
+                          (widget.padding != null ? widget.padding.horizontal : 0),
+                  child: Container(
+                    height: widget.minHeight,
+                    child: Opacity(
+                      opacity: 1.0 - _ac.value,
+
+                      // if the panel is open ignore pointers (touch events) on the collapsed
+                      // child so that way touch events go through to whatever is underneath
+                      child: IgnorePointer(
+                        ignoring: _isPanelOpen(),
+                        child: widget.collapsed ?? Container(),
+                      ),
                     ),
                   ),
                 ),
@@ -281,8 +301,18 @@ class _SlidingUpPanelState extends State<SlidingUpPanel> with SingleTickerProvid
     super.dispose();
   }
 
+  double _getParallax(){
+    if(widget.slideDirection == SlideDirection.UP)
+      return -_ac.value * (widget.maxHeight - widget.minHeight) * widget.parallaxOffset;
+    else
+      return _ac.value * (widget.maxHeight - widget.minHeight) * widget.parallaxOffset;
+  }
+
   void _onDrag(DragUpdateDetails details){
-    _ac.value -= details.primaryDelta / (widget.maxHeight - widget.minHeight);
+    if(widget.slideDirection == SlideDirection.UP)
+      _ac.value -= details.primaryDelta / (widget.maxHeight - widget.minHeight);
+    else
+      _ac.value += details.primaryDelta / (widget.maxHeight - widget.minHeight);
   }
 
   void _onDragEnd(DragEndDetails details){
@@ -295,10 +325,13 @@ class _SlidingUpPanelState extends State<SlidingUpPanel> with SingleTickerProvid
     if(details.velocity.pixelsPerSecond.dy.abs() >= minFlingVelocity){
       double visualVelocity = - details.velocity.pixelsPerSecond.dy / (widget.maxHeight - widget.minHeight);
 
-      if(widget.panelSnapping)
+      if(widget.slideDirection == SlideDirection.DOWN)
+        visualVelocity = -visualVelocity;
+
+      if(widget.panelSnapping){
         _ac.fling(velocity: visualVelocity);
-      else{
-        // actual scroll physics, will be implemented in a future release
+      }else{
+        // actual scroll physics will be implemented in a future release
         _ac.animateTo(
           _ac.value + visualVelocity * 0.16,
           duration: Duration(milliseconds: 410),
@@ -321,7 +354,6 @@ class _SlidingUpPanelState extends State<SlidingUpPanel> with SingleTickerProvid
 
 
 
-
   //---------------------------------
   //PanelController related functions
   //---------------------------------

pubspec.yaml

@@ -1,6 +1,6 @@
 name: sliding_up_panel
 description: A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!
-version: 0.3.3
+version: 0.3.4
 author: Akshath Jain <[email protected]>
 homepage: https://github.com/akshathjain/sliding_up_panel