Performance improvements

alex-melnyk · Jun 22, 2021 · 9e82a22 · 9e82a22
1 parent 5c740ea
commit 9e82a22
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 127 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.2.1
+
+* Performance improvements
+
 ## 1.2.0
 
 * Closing drawer with open ration 1.0 fixed.

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -29,6 +29,7 @@ class _HomeScreenState extends State<HomeScreen> {
       controller: _advancedDrawerController,
       animationCurve: Curves.easeInOut,
       animationDuration: const Duration(milliseconds: 300),
+      animateChildDecoration: true,
       childDecoration: const BoxDecoration(
         // NOTICE: Uncomment if you want to add shadow behind the page.
         // Keep in mind that it may cause animation jerks.
@@ -47,9 +48,13 @@ class _HomeScreenState extends State<HomeScreen> {
             onPressed: _handleMenuButtonPressed,
             icon: ValueListenableBuilder<AdvancedDrawerValue>(
               valueListenable: _advancedDrawerController,
-              builder: (context, value, child) {
-                return Icon(
-                  value.visible ? Icons.clear : Icons.menu,
+              builder: (_, value, __) {
+                return AnimatedSwitcher(
+                  duration: Duration(milliseconds: 250),
+                  child: Icon(
+                    value.visible ? Icons.clear : Icons.menu,
+                    key: ValueKey<bool>(value.visible),
+                  ),
                 );
               },
             ),

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -26,7 +26,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.2.0"
+    version: "1.2.1"
   meta:
     dependency: transitive
     description:
@@ -55,4 +55,3 @@ packages:
     version: "2.1.0"
 sdks:
   dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.20.0"
diff --git a/lib/flutter_advanced_drawer.dart b/lib/flutter_advanced_drawer.dart
@@ -3,5 +3,7 @@ library flutter_advanced_drawer;
 import 'package:flutter/material.dart';
 
 part 'src/controller.dart';
+
 part 'src/value.dart';
+
 part 'src/widget.dart';
diff --git a/lib/src/controller.dart b/lib/src/controller.dart
@@ -18,10 +18,10 @@ class AdvancedDrawerController extends ValueNotifier<AdvancedDrawerValue> {
 
   /// Toggles drawer.
   void toggleDrawer() {
-    if (value.visible!) {
-      hideDrawer();
-    } else {
-      showDrawer();
+    if (value.visible) {
+      return hideDrawer();
     }
+
+    return showDrawer();
   }
 }
diff --git a/lib/src/state.dart b/lib/src/state.dart
diff --git a/lib/src/value.dart b/lib/src/value.dart
@@ -3,18 +3,18 @@ part of '../flutter_advanced_drawer.dart';
 /// AdvancedDrawer state value.
 class AdvancedDrawerValue {
   const AdvancedDrawerValue({
-    this.visible,
+    this.visible = false,
   });
 
   /// Indicates whether drawer visible or not.
-  final bool? visible;
+  final bool visible;
 
+  /// Create a value with hidden state.
   factory AdvancedDrawerValue.hidden() {
-    return const AdvancedDrawerValue(
-      visible: false,
-    );
+    return const AdvancedDrawerValue();
   }
 
+  /// Create a value with visible state.
   factory AdvancedDrawerValue.visible() {
     return const AdvancedDrawerValue(
       visible: true,

diff --git a/lib/src/widget.dart b/lib/src/widget.dart
@@ -55,9 +55,10 @@ class _AdvancedDrawerState extends State<AdvancedDrawer>
     with SingleTickerProviderStateMixin {
   late AdvancedDrawerController _controller;
   late AnimationController _animationController;
-  late Animation<double> drawerScalingAnimation;
-  late Animation<double> drawerOpacityAnimation;
-  late Animation<double> screenScalingTween;
+  late Animation<double> _drawerScaleAnimation;
+  late Animation<Offset> _childSlideAnimation;
+  late Animation<double> _childScaleAnimation;
+  late Animation<Decoration> _childDecorationAnimation;
   late double _offsetValue;
   late Offset _freshPosition;
   Offset? _startPosition;
@@ -73,23 +74,35 @@ class _AdvancedDrawerState extends State<AdvancedDrawer>
     _animationController = AnimationController(
       vsync: this,
       duration: widget.animationDuration,
-      value: _controller.value.visible! ? 1 : 0,
+      value: _controller.value.visible ? 1 : 0,
     );
 
-    drawerScalingAnimation = Tween<double>(
+    final parentAnimation = widget.animationCurve != null
+        ? CurvedAnimation(
+            curve: widget.animationCurve!,
+            parent: _animationController,
+          )
+        : _animationController;
+
+    _drawerScaleAnimation = Tween<double>(
       begin: 0.75,
       end: 1.0,
-    ).animate(_animationController);
+    ).animate(parentAnimation);
 
-    drawerOpacityAnimation = Tween<double>(
-      begin: 0.25,
-      end: 1.0,
-    ).animate(_animationController);
+    _childSlideAnimation = Tween<Offset>(
+      begin: Offset.zero,
+      end: Offset(widget.openRatio, 0),
+    ).animate(parentAnimation);
 
-    screenScalingTween = Tween<double>(
+    _childScaleAnimation = Tween<double>(
       begin: 1.0,
       end: 0.85,
-    ).animate(_animationController);
+    ).animate(parentAnimation);
+
+    _childDecorationAnimation = DecorationTween(
+      begin: const BoxDecoration(),
+      end: widget.childDecoration,
+    ).animate(parentAnimation);
   }
 
   @override
@@ -101,105 +114,87 @@ class _AdvancedDrawerState extends State<AdvancedDrawer>
         onHorizontalDragUpdate: _handleDragUpdate,
         onHorizontalDragEnd: _handleDragEnd,
         onHorizontalDragCancel: _handleDragCancel,
-        child: LayoutBuilder(
-          builder: (context, constraints) {
-            final maxOffset = constraints.maxWidth * widget.openRatio;
-
-            final screenTranslateTween = Tween<Offset>(
-              begin: Offset(0, 0),
-              end: Offset(widget.rtlOpening ? -maxOffset : maxOffset, 0),
-            ).animate(widget.animationCurve != null
-                ? CurvedAnimation(
-                    parent: _animationController,
-                    curve: widget.animationCurve!,
-                  )
-                : _animationController);
-
-            return Stack(
-              children: <Widget>[
-                // -------- DRAWER
-                FractionallySizedBox(
-                  widthFactor: widget.openRatio,
-                  child: AnimatedBuilder(
-                    animation: _animationController,
-                    builder: (context, child) {
-                      return Opacity(
-                        opacity: drawerOpacityAnimation.value,
-                        child: Transform.scale(
-                          alignment: Alignment.centerRight,
-                          scale: drawerScalingAnimation.value,
-                          child: child,
-                        ),
-                      );
-                    },
-                    child: Container(
-                      alignment: Alignment.centerLeft,
-                      color: Colors.transparent,
-                      child: widget.drawer,
-                    ),
-                  ),
+        child: Stack(
+          children: <Widget>[
+            // -------- DRAWER
+            FractionallySizedBox(
+              widthFactor: widget.openRatio,
+              child: ScaleTransition(
+                scale: _drawerScaleAnimation,
+                alignment: Alignment.centerRight,
+                child: Container(
+                  alignment: Alignment.centerLeft,
+                  color: Colors.transparent,
+                  child: widget.drawer,
                 ),
-                // -------- CHILD
-                AnimatedBuilder(
-                  animation: _animationController,
-                  builder: (context, child) {
-                    return Transform.translate(
-                      offset: screenTranslateTween.value,
-                      child: Transform.scale(
-                        alignment: Alignment.centerLeft,
-                        scale: screenScalingTween.value,
-                        child: Container(
-                          clipBehavior: Clip.antiAlias,
-                          decoration: widget.animateChildDecoration
-                              ? BoxDecoration.lerp(
-                                  const BoxDecoration(
-                                    boxShadow: const [],
-                                    borderRadius: BorderRadius.zero,
-                                  ),
-                                  widget.childDecoration,
-                                  _animationController.value,
-                                )
-                              : widget.childDecoration,
-                          child: child,
+              ),
+            ),
+            // -------- CHILD
+            SlideTransition(
+              position: _childSlideAnimation,
+              textDirection:
+                  widget.rtlOpening ? TextDirection.rtl : TextDirection.ltr,
+              child: ScaleTransition(
+                scale: _childScaleAnimation,
+                child: Builder(
+                  builder: (_) {
+                    final childStack = Stack(
+                      children: [
+                        widget.child,
+                        ValueListenableBuilder<AdvancedDrawerValue>(
+                          valueListenable: _controller,
+                          builder: (_, value, __) {
+                            if (!value.visible) {
+                              return const SizedBox();
+                            }
+
+                            return Material(
+                              color: Colors.transparent,
+                              child: InkWell(
+                                onTap: _controller.hideDrawer,
+                                highlightColor: Colors.transparent,
+                                child: Container(),
+                              ),
+                            );
+                          },
                         ),
-                      ),
+                      ],
+                    );
+
+                    if (widget.animateChildDecoration &&
+                        widget.childDecoration != null) {
+                      return AnimatedBuilder(
+                        animation: _childDecorationAnimation,
+                        builder: (_, child) {
+                          return Container(
+                            clipBehavior: Clip.antiAlias,
+                            decoration: _childDecorationAnimation.value,
+                            child: child,
+                          );
+                        },
+                        child: childStack,
+                      );
+                    }
+
+                    return Container(
+                      clipBehavior: widget.childDecoration != null
+                          ? Clip.antiAlias
+                          : Clip.none,
+                      decoration: widget.childDecoration,
+                      child: childStack,
                     );
                   },
-                  child: ValueListenableBuilder<AdvancedDrawerValue>(
-                    valueListenable: _controller,
-                    builder: (_, value, child) {
-                      if (value.visible!) {
-                        return Stack(
-                          children: [
-                            child!,
-                            if (value.visible!)
-                              Material(
-                                color: Colors.transparent,
-                                child: InkWell(
-                                  onTap: _controller.hideDrawer,
-                                  highlightColor: Colors.transparent,
-                                  child: Container(),
-                                ),
-                              ),
-                          ],
-                        );
-                      }
-
-                      return child!;
-                    },
-                    child: widget.child,
-                  ),
                 ),
-              ],
-            );
-          },
+              ),
+            ),
+          ],
         ),
       ),
     );
   }
 
   void handleControllerChanged() {
-    _controller.value.visible!
+    _controller.value.visible
         ? _animationController.forward()
         : _animationController.reverse();
   }
@@ -228,26 +223,24 @@ class _AdvancedDrawerState extends State<AdvancedDrawer>
     if (!_captured) return;
 
     _captured = false;
-    _startPosition = null;
 
     if (_animationController.value >= 0.5) {
-      _controller.showDrawer();
-
-      if (_controller.value.visible!) {
-        _animationController.animateTo(1);
+      if (_controller.value.visible) {
+        _animationController.forward();
+      } else {
+        _controller.showDrawer();
       }
     } else {
-      _controller.hideDrawer();
-
-      if (!_controller.value.visible!) {
-        _animationController.animateTo(0);
+      if (!_controller.value.visible) {
+        _animationController.reverse();
+      } else {
+        _controller.hideDrawer();
       }
     }
   }
 
   void _handleDragCancel() {
     _captured = false;
-    _startPosition = null;
   }
 
   @override

diff --git a/pubspec.lock b/pubspec.lock
@@ -48,4 +48,3 @@ packages:
     version: "2.1.0"
 sdks:
   dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.20.0"
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,14 +1,13 @@
 name: flutter_advanced_drawer
 description: An advanced drawer widget, that can be fully customized with size, text, color, radius of corners.
-version: 1.2.0
+version: 1.2.1
 homepage: https://github.com/alex-melnyk/flutter_advanced_drawer
 repository: https://github.com/alex-melnyk/flutter_advanced_drawer
 issue_tracker: https://github.com/alex-melnyk/flutter_advanced_drawer/issues
 documentation: https://github.com/alex-melnyk/flutter_advanced_drawer/blob/master/README.md
 
 environment:
   sdk: '>=2.12.0 <3.0.0'
-  flutter: ">=1.20.0"
 
 dependencies:
   flutter: