updated dialogs and sheets open/close animations

woltapp · Jun 30, 2024 · fc4e45e · fc4e45e
1 parent d9863f5
commit fc4e45e
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 15 deletions.
diff --git a/lib/src/modal_type/wolt_alert_dialog_type.dart b/lib/src/modal_type/wolt_alert_dialog_type.dart
@@ -41,22 +41,36 @@ class WoltAlertDialogType extends WoltDialogType {
     Animation<double> secondaryAnimation,
     Widget child,
   ) {
+    final isClosing = animation.status == AnimationStatus.reverse;
+
+    const enteringInterval = Interval(100.0 / 250.0, 1.0, curve: Curves.linear);
+    const exitingInterval = Interval(0.0, 100.0 / 300.0, curve: Curves.linear);
+
+    const enteringCubic = Cubic(0.2, 0.6, 0.4, 1.0);
+    const exitingCubic = Cubic(0.5, 0, 0.7, 0.2);
+
+    final interval = isClosing ? exitingInterval : enteringInterval;
+    final reverseInterval = isClosing ? enteringInterval : exitingInterval;
+
+    final cubic = isClosing ? exitingCubic : enteringCubic;
+    final reverseCubic = isClosing ? enteringCubic : exitingCubic;
+
     final alphaAnimation = Tween<double>(
       begin: 0.0,
       end: 1.0,
     ).animate(CurvedAnimation(
       parent: animation,
-      curve: const Interval(0.0, 100.0 / 300.0, curve: Curves.linear),
-      reverseCurve: const Interval(100.0 / 250.0, 1.0, curve: Curves.linear),
+      curve: interval,
+      reverseCurve: reverseInterval,
     ));
 
     final scaleAnimation = Tween<double>(
       begin: 0.6,
       end: 1.0,
     ).animate(CurvedAnimation(
       parent: animation,
-      curve: const Cubic(0.2, 0.6, 0.4, 1.0), // Cubic for enter
-      reverseCurve: const Cubic(0.5, 0, 0.7, 0.2), // Cubic for exit
+      curve: cubic,
+      reverseCurve: reverseCubic,
     ));
 
     return ScaleTransition(

diff --git a/lib/src/modal_type/wolt_bottom_sheet_type.dart b/lib/src/modal_type/wolt_bottom_sheet_type.dart
@@ -140,14 +140,22 @@ class WoltBottomSheetType extends WoltModalType {
     Animation<double> secondaryAnimation,
     Widget child,
   ) {
+    final isClosing = animation.status == AnimationStatus.reverse;
+
+    const enteringCubic = Cubic(0.1, 0.8, 0.2, 1.0);
+    const exitingCubic = Cubic(0.5, 0, 0.7, 0.2);
+
+    final cubic = isClosing ? exitingCubic : enteringCubic;
+    final reverseCubic = isClosing ? enteringCubic : exitingCubic;
+
     final positionAnimation = Tween<Offset>(
       begin: const Offset(0.0, 1.0),
       end: Offset.zero,
     ).animate(
       CurvedAnimation(
         parent: animation,
-        curve: const Cubic(0.1, 0.8, 0.2, 1.0), // Cubic for enter
-        reverseCurve: const Cubic(0.5, 0, 0.7, 0.2), // Cubic for exit
+        curve: cubic,
+        reverseCurve: reverseCubic,
       ),
     );
 

diff --git a/lib/src/modal_type/wolt_dialog_type.dart b/lib/src/modal_type/wolt_dialog_type.dart
@@ -105,13 +105,21 @@ class WoltDialogType extends WoltModalType {
     Animation<double> secondaryAnimation,
     Widget child,
   ) {
+    final isClosing = animation.status == AnimationStatus.reverse;
+
+    const enteringInterval = Interval(0.0, 100.0 / 300.0, curve: Curves.linear);
+    const exitingInterval = Interval(100.0 / 250.0, 1.0, curve: Curves.linear);
+
+    final interval = isClosing ? exitingInterval : enteringInterval;
+    final reverseInterval = isClosing ? enteringInterval : exitingInterval;
+
     final alphaAnimation = Tween<double>(
       begin: 0.0,
       end: 1.0,
     ).animate(CurvedAnimation(
       parent: animation,
-      curve: const Interval(0.0, 100.0 / 300.0, curve: Curves.linear),
-      reverseCurve: const Interval(100.0 / 250.0, 1.0, curve: Curves.linear),
+      curve: interval,
+      reverseCurve: reverseInterval,
     ));
 
     return FadeTransition(

diff --git a/lib/src/modal_type/wolt_side_sheet_type.dart b/lib/src/modal_type/wolt_side_sheet_type.dart
@@ -128,23 +128,41 @@ class WoltSideSheetType extends WoltModalType {
   ) {
     final isRtl = Directionality.of(context) == TextDirection.rtl;
 
+    final isClosing = animation.status == AnimationStatus.reverse;
+
+    const enteringInterval = Interval(0.0, 100.0 / 300.0, curve: Curves.linear);
+    const exitingInterval = Interval(100.0 / 250.0, 1.0, curve: Curves.linear);
+
+    const enteringCubic = Cubic(0.2, 0.6, 0.4, 1.0);
+    const exitingCubic = Cubic(0.5, 0, 0.7, 0.2);
+
+    final interval = isClosing ? exitingInterval : enteringInterval;
+    final reverseInterval = isClosing ? enteringInterval : exitingInterval;
+
+    final cubic = isClosing ? exitingCubic : enteringCubic;
+    final reverseCubic = isClosing ? enteringCubic : exitingCubic;
+
+    // Define the alpha animation for entering
     final alphaAnimation = Tween<double>(
       begin: 0.0,
       end: 1.0,
-    ).animate(CurvedAnimation(
-      parent: animation,
-      curve: const Interval(0.0, 100.0 / 300.0, curve: Curves.linear),
-      reverseCurve: const Interval(100.0 / 250.0, 1.0, curve: Curves.linear),
-    ));
+    ).animate(
+      CurvedAnimation(
+        parent: animation,
+        curve: interval,
+        reverseCurve: reverseInterval,
+      ),
+    );
 
+    // Define the position animation for entering
     final positionAnimation = Tween<Offset>(
       begin: isRtl ? const Offset(-1.0, 0.0) : const Offset(1.0, 0.0),
       end: Offset.zero,
     ).animate(
       CurvedAnimation(
         parent: animation,
-        curve: const Cubic(0.2, 0.6, 0.4, 1.0), // Cubic for enter
-        reverseCurve: const Cubic(0.5, 0, 0.7, 0.2), // Cubic for exit
+        curve: cubic,
+        reverseCurve: reverseCubic,
       ),
     );