Add support for a drawer slide animation

alex-melnyk · Jan 17, 2025 · bc3b330 · bc3b330
1 parent 19ca026
commit bc3b330
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ An advanced drawer widget, that can be fully customized with size, text, color,
 |`rtlOpening`|Opening from Right-to-left.|*bool*|false|
 |`disabledGestures`|Disable gestures.|*bool*|false|
 |`initialDrawerScale`|How large the drawer segment should scale from.|*double*|0.75|
+|`drawerSlideRatio`|How far the drawer segment should slide with the content.|*double*|0|
 
 ## Preview
 | Preview Tap | Preview Gesture |

diff --git a/lib/src/widget.dart b/lib/src/widget.dart
@@ -12,6 +12,7 @@ class AdvancedDrawer extends StatefulWidget {
     this.openRatio = 0.75,
     this.openScale = 0.85,
     this.initialDrawerScale = 0.75,
+    this.drawerSlideRatio = 0,
     this.animationDuration = const Duration(milliseconds: 250),
     this.animationCurve,
     this.childDecoration,
@@ -46,6 +47,11 @@ class AdvancedDrawer extends StatefulWidget {
   /// Set to 1 to disable drawer segment scale effect.
   final double initialDrawerScale;
 
+  /// How far the drawer segment should slide with the content
+  /// 0 = no slide distance
+  /// 1 = slide from completely off screen
+  final double drawerSlideRatio;
+
   /// Animation duration.
   final Duration animationDuration;
 
@@ -82,6 +88,7 @@ class _AdvancedDrawerState extends State<AdvancedDrawer>
   late Animation<double> _drawerScaleAnimation;
   late Animation<Offset> _childSlideAnimation;
   late Animation<double> _childScaleAnimation;
+  late Animation<Offset> _drawerSlideAnimation;
   late Animation<Decoration> _childDecorationAnimation;
 
   late double _offsetValue;
@@ -125,15 +132,18 @@ class _AdvancedDrawerState extends State<AdvancedDrawer>
                 alignment: widget.rtlOpening
                     ? Alignment.centerRight
                     : Alignment.centerLeft,
-                child: FractionallySizedBox(
-                  widthFactor: widget.openRatio,
-                  child: ScaleTransition(
-                    scale: _drawerScaleAnimation,
-                    alignment: widget.rtlOpening
-                        ? Alignment.centerLeft
-                        : Alignment.centerRight,
-                    child: RepaintBoundary(
-                      child: widget.drawer,
+                child: SlideTransition(
+                  position: _drawerSlideAnimation,
+                  child: FractionallySizedBox(
+                    widthFactor: widget.openRatio,
+                    child: ScaleTransition(
+                      scale: _drawerScaleAnimation,
+                      alignment: widget.rtlOpening
+                          ? Alignment.centerLeft
+                          : Alignment.centerRight,
+                      child: RepaintBoundary(
+                        child: widget.drawer,
+                      ),
                     ),
                   ),
                 ),
@@ -238,6 +248,11 @@ class _AdvancedDrawerState extends State<AdvancedDrawer>
       end: 1.0,
     ).animate(parentAnimation);
 
+    _drawerSlideAnimation = Tween<Offset>(
+      begin: Offset(-widget.drawerSlideRatio, 0),
+      end: Offset.zero,
+    ).animate(parentAnimation);
+
     _childSlideAnimation = Tween<Offset>(
       begin: Offset.zero,
       end: Offset(widget.openRatio, 0),