adjust AnimationType, add scalePoint (showAttach)

Author: xdd666t

CHANGELOG.md

@@ -5,6 +5,20 @@
 - Fix [#56](https://github.com/fluttercandies/flutter_smart_dialog/issues/56)
 - Fix [#60](https://github.com/fluttercandies/flutter_smart_dialog/issues/60)
 - Add SmartDialogController
+- adjust AnimationType
+  - fade: FadeTransition for all positions
+  - scale: All positions are ScaleTransition
+  - centerFade_otherSlide: The center position is the FadeTransition, and the other positions are the SlideTransition
+  - centerScale_otherSlide: The center position is the ScaleTransition, and the other positions are the SlideTransition
+- add scalePoint (showAttach)
+
+# [4.0.5]
+- adjust AnimationType
+    - fade: FadeTransition for all positions
+    - scale: All positions are ScaleTransition
+    - centerFade_otherSlide: The center position is the FadeTransition, and the other positions are the SlideTransition
+    - centerScale_otherSlide: The center position is the ScaleTransition, and the other positions are the SlideTransition
+- add scalePoint (showAttach)
 
 # [4.0.3]
 

example/lib/main.dart

@@ -84,10 +84,14 @@ class SmartDialogPage extends StatelessWidget {
     var attachDialog = (BuildContext context) {
       SmartDialog.showAttach(
         targetContext: context,
-        alignment: Alignment.topCenter,
-        useSystem: true,
+        alignment: Alignment.bottomCenter,
+        animationType: SmartAnimationType.scale,
+        scalePoint: Offset(100, 0),
         builder: (_) {
-          return Container(width: 100, height: 100, color: Colors.red);
+          return Column(mainAxisSize: MainAxisSize.min, children: [
+            Container(width: 100, height: 50, color: Colors.red),
+            Container(width: 100, height: 50, color: Colors.blue),
+          ]);
         },
       );
     };

lib/src/compatible/compatible_smart_dialog.dart

@@ -124,8 +124,8 @@ class CompatibleSmartDialog {
       alignment: alignmentTemp ?? config.alignment,
       clickMaskDismiss: clickBgDismissTemp ?? config.clickBgDismiss,
       animationType: isLoadingTemp ?? config.isLoading
-          ? SmartAnimationType.centerFadeAndOtherScale
-          : SmartAnimationType.scale,
+          ? SmartAnimationType.centerFade_otherSlide
+          : SmartAnimationType.centerScale_otherSlide,
       usePenetrate: isPenetrateTemp ?? config.isPenetrate,
       useAnimation: isUseAnimationTemp ?? config.isUseAnimation,
       animationTime: animationDurationTemp ?? config.animationDuration,
@@ -279,6 +279,7 @@ class CompatibleSmartDialog {
       animationType: isLoadingTemp ?? false
           ? SmartAnimationType.fade
           : SmartAnimationType.scale,
+      scalePoint: null,
       usePenetrate: isPenetrateTemp ?? config.isPenetrate,
       useAnimation: isUseAnimationTemp ?? config.isUseAnimation,
       animationTime: animationDurationTemp ?? config.animationDuration,

lib/src/config/enum_config.dart

@@ -79,18 +79,25 @@ enum SmartToastType {
 ///
 /// 可给弹窗(出现和消失)设置不同的动画类型
 enum SmartAnimationType {
-  /// FadeTransition
+  /// FadeTransition for all positions
   ///
-  /// 渐隐动画
+  /// 全部位置都为渐隐动画
   fade,
 
-  /// SizeTransition
+  /// All positions are ScaleTransition
   ///
-  /// 缩放动画
+  /// 全部位置都为缩放动画
   scale,
 
-  /// 中间位置的为渐隐动画, 其他位置为位移缩放动画
-  centerFadeAndOtherScale
+  /// The center position is the FadeTransition, and the other positions are the SlideTransition
+  ///
+  /// 中间位置的为渐隐动画, 其他位置为位移动画
+  centerFade_otherSlide,
+
+  /// The center position is the ScaleTransition, and the other positions are the SlideTransition
+  ///
+  /// 中间位置的为缩放, 其他位置为位移动画
+  centerScale_otherSlide,
 }
 
 /// The type of dialog await ending

lib/src/config/smart_config_attach.dart

@@ -8,7 +8,7 @@ import 'enum_config.dart';
 class SmartConfigAttach {
   SmartConfigAttach({
     this.alignment = Alignment.bottomCenter,
-    this.animationType = SmartAnimationType.scale,
+    this.animationType = SmartAnimationType.centerScale_otherSlide,
     this.animationTime = const Duration(milliseconds: 260),
     this.useAnimation = true,
     this.usePenetrate = false,

lib/src/config/smart_config_custom.dart

@@ -8,7 +8,7 @@ import 'enum_config.dart';
 class SmartConfigCustom {
   SmartConfigCustom({
     this.alignment = Alignment.center,
-    this.animationType = SmartAnimationType.scale,
+    this.animationType = SmartAnimationType.centerScale_otherSlide,
     this.animationTime = const Duration(milliseconds: 260),
     this.useAnimation = true,
     this.usePenetrate = false,

lib/src/custom/custom_dialog.dart

@@ -90,6 +90,7 @@ class CustomDialog extends BaseDialog {
     required bool useAnimation,
     required Duration animationTime,
     required SmartAnimationType animationType,
+    required Offset? scalePoint,
     required Color maskColor,
     required bool clickMaskDismiss,
     required bool debounce,
@@ -123,6 +124,7 @@ class CustomDialog extends BaseDialog {
       useAnimation: useAnimation,
       animationTime: animationTime,
       animationType: animationType,
+      scalePoint: scalePoint,
       maskColor: maskColor,
       highlightBuilder: highlightBuilder,
       maskWidget: maskWidget,

lib/src/custom/main_dialog.dart

@@ -76,6 +76,7 @@ class MainDialog {
     required bool useAnimation,
     required Duration animationTime,
     required SmartAnimationType animationType,
+    required Offset? scalePoint,
     required Color maskColor,
     required Widget? maskWidget,
     required HighlightBuilder highlightBuilder,
@@ -95,6 +96,7 @@ class MainDialog {
       useAnimation: useAnimation,
       animationTime: animationTime,
       animationType: animationType,
+      scalePoint: scalePoint,
       maskColor: maskColor,
       maskWidget: maskWidget,
       highlightBuilder: highlightBuilder,

lib/src/helper/dialog_proxy.dart

@@ -106,6 +106,7 @@ class DialogProxy {
     required bool useAnimation,
     required Duration animationTime,
     required SmartAnimationType animationType,
+    required Offset? scalePoint,
     required Color maskColor,
     required bool clickMaskDismiss,
     required Widget? maskWidget,
@@ -134,6 +135,7 @@ class DialogProxy {
       useAnimation: useAnimation,
       animationTime: animationTime,
       animationType: animationType,
+      scalePoint: scalePoint,
       maskColor: maskColor,
       maskWidget: maskWidget,
       highlightBuilder: highlightBuilder,

lib/src/smart_dialog.dart

@@ -190,6 +190,12 @@ class SmartDialog {
   ///
   /// [animationType]：For details, please refer to the [SmartAnimationType] comment
   ///
+  /// [scalePoint]：he zoom point of the zoom animation, the default point is the center point of the attach widget as the zoom point;
+  /// Offset(0, 0): Use the upper left point of the control as the zoom point,
+  /// Offset(attach widget width, 0): Use the upper right point of the control as the zoom point
+  /// Offset(0, attach widget height): use the lower left point of the control as the zoom point,
+  /// Offset (attach widget width, attach widget height): use the lower right point of the control as the zoom point
+  ///
   /// [usePenetrate]：true（the click event will penetrate mask），false（not penetration）
   ///
   /// [useAnimation]：true（use the animation），false（not use）
@@ -247,6 +253,10 @@ class SmartDialog {
   ///
   /// [animationType]：具体可参照[SmartAnimationType]注释
   ///
+  /// [scalePoint]：缩放动画的缩放点, 默认点将自定义dialog控件的中心点作为缩放点;
+  /// Offset(0, 0): 将控件左上点作为缩放点, Offset(控件宽度, 0): 将控件右上点作为缩放点
+  /// Offset(0, 控件高度): 将控件左下点作为缩放点, Offset(控件宽度, 控件高度): 将控件右下点作为缩放点
+  ///
   /// [usePenetrate]：true（点击事件将穿透遮罩），false（不穿透）
   ///
   /// [useAnimation]：true（使用动画），false（不使用）
@@ -289,6 +299,7 @@ class SmartDialog {
     AlignmentGeometry? alignment,
     bool? clickMaskDismiss,
     SmartAnimationType? animationType,
+    Offset? scalePoint,
     bool? usePenetrate,
     bool? useAnimation,
     Duration? animationTime,
@@ -333,6 +344,7 @@ class SmartDialog {
       alignment: alignment ?? config.attach.alignment,
       clickMaskDismiss: clickMaskDismiss ?? config.attach.clickMaskDismiss,
       animationType: animationType ?? config.attach.animationType,
+      scalePoint: scalePoint,
       usePenetrate: usePenetrate ?? config.attach.usePenetrate,
       useAnimation: useAnimation ?? config.attach.useAnimation,
       animationTime: animationTime ?? config.attach.animationTime,

lib/src/util/view_utils.dart

@@ -5,7 +5,7 @@ class ViewUtils {
   static bool routeSafeUse = false;
 
   static void addSafeUse(VoidCallback callback) {
-    var schedulerPhase = SchedulerBinding.instance.schedulerPhase;
+    var schedulerPhase = schedulerBinding.schedulerPhase;
     if (schedulerPhase == SchedulerPhase.persistentCallbacks) {
       ViewUtils.addPostFrameCallback((timeStamp) => callback());
     } else {
@@ -19,3 +19,5 @@ class ViewUtils {
 }
 
 WidgetsBinding get widgetsBinding => WidgetsBinding.instance;
+
+SchedulerBinding get schedulerBinding => SchedulerBinding.instance;

lib/src/widget/attach_dialog_widget.dart

@@ -25,6 +25,7 @@ class AttachDialogWidget extends StatefulWidget {
     required this.alignment,
     required this.usePenetrate,
     required this.animationType,
+    required this.scalePoint,
     required this.maskColor,
     required this.highlightBuilder,
     required this.maskWidget,
@@ -60,6 +61,9 @@ class AttachDialogWidget extends StatefulWidget {
   /// 仅仅针对中间位置的控件
   final SmartAnimationType animationType;
 
+  /// 缩放动画的缩放点
+  final Offset? scalePoint;
+
   /// 遮罩颜色
   final Color maskColor;
 
@@ -81,6 +85,7 @@ class _AttachDialogWidgetState extends State<AttachDialogWidget>
   //target info
   RectInfo? _targetRect;
   BuildContext? _childContext;
+  Alignment? _scaleAlignment;
   late Axis _axis;
   late double _postFrameOpacity;
 
@@ -202,29 +207,57 @@ class _AttachDialogWidgetState extends State<AttachDialogWidget>
 
   Widget _buildBodyAnimation(Widget child) {
     var animation = CurvedAnimation(parent: _ctrlBody, curve: Curves.linear);
-    var transition = widget.alignment == Alignment.center
-        //中间弹窗动画使用缩放
-        ? ScaleTransition(scale: animation, child: child)
-        //其它的都使用位移动画
-        : SizeTransition(axis: _axis, sizeFactor: _ctrlBody, child: child);
-
-    bool useFade = (widget.animationType == SmartAnimationType.fade) ||
-        (widget.animationType == SmartAnimationType.centerFadeAndOtherScale &&
-            widget.alignment == Alignment.center);
-    return useFade
-        ? FadeTransition(opacity: animation, child: child)
-        : transition;
+    var type = widget.animationType;
+    Widget animationWidget = FadeTransition(opacity: animation, child: child);
+
+    //select different animation
+    if (type == SmartAnimationType.fade) {
+      animationWidget = FadeTransition(opacity: animation, child: child);
+    } else if (type == SmartAnimationType.scale) {
+      animationWidget = ScaleTransition(
+        alignment: _scaleAlignment ?? Alignment(0, 0),
+        scale: animation,
+        child: child,
+      );
+    } else if (type == SmartAnimationType.centerFade_otherSlide) {
+      if (widget.alignment == Alignment.center) {
+        animationWidget = FadeTransition(opacity: animation, child: child);
+      } else {
+        animationWidget = SizeTransition(
+          axis: _axis,
+          sizeFactor: _ctrlBody,
+          child: child,
+        );
+      }
+    } else if (type == SmartAnimationType.centerScale_otherSlide) {
+      if (widget.alignment == Alignment.center) {
+        animationWidget = ScaleTransition(
+          alignment: _scaleAlignment ?? Alignment(0, 0),
+          scale: animation,
+          child: child,
+        );
+      } else {
+        animationWidget = SizeTransition(
+          axis: _axis,
+          sizeFactor: _ctrlBody,
+          child: child,
+        );
+      }
+    }
+
+    return animationWidget;
   }
 
-  ///处理下动画方向及其位置
+  /// 处理: 动画方向及其位置, 缩放动画的缩放点
   void _handleAnimatedAndLocation() {
+    final childSize = (_childContext!.findRenderObject() as RenderBox).size;
+
+    //动画方向及其位置
     _axis = Axis.vertical;
     final alignment = widget.alignment;
     var offset = targetOffset;
     var size = targetSize;
     final screen = MediaQuery.of(context).size;
-    final childSize = (_childContext!.findRenderObject() as RenderBox).size;
-
     if (alignment == Alignment.topLeft) {
       _targetRect = RectInfo(
         bottom: screen.height - offset.dy,
@@ -276,6 +309,17 @@ class _AttachDialogWidgetState extends State<AttachDialogWidget>
       );
     }
 
+    //缩放动画的缩放点
+    if (widget.scalePoint != null) {
+      var halfWidth = childSize.width / 2;
+      var halfHeight = childSize.height / 2;
+      var scaleDx = widget.scalePoint!.dx;
+      var scaleDy = widget.scalePoint!.dy;
+      var rateX = (scaleDx - halfWidth) / halfWidth;
+      var rateY = (scaleDy - halfHeight) / halfHeight;
+      _scaleAlignment = Alignment(rateX, rateY);
+    }
+
     //第一帧后恢复透明度,同时重置位置信息
     _postFrameOpacity = 1;
     setState(() {});

lib/src/widget/smart_dialog_widget.dart

@@ -129,20 +129,37 @@ class _SmartDialogWidgetState extends State<SmartDialogWidget>
   }
 
   Widget _buildBodyAnimation() {
+    var child = widget.child;
     var animation = CurvedAnimation(parent: _ctrlBody, curve: Curves.linear);
     var tw = Tween<Offset>(begin: _offset, end: Offset.zero);
-    var transition = widget.alignment == Alignment.center
-        //中间弹窗动画使用缩放
-        ? ScaleTransition(scale: animation, child: widget.child)
-        //其它的都使用位移动画
-        : SlideTransition(position: tw.animate(_ctrlBody), child: widget.child);
-
-    bool useFade = (widget.animationType == SmartAnimationType.fade) ||
-        (widget.animationType == SmartAnimationType.centerFadeAndOtherScale &&
-            widget.alignment == Alignment.center);
-    return useFade
-        ? FadeTransition(opacity: animation, child: widget.child)
-        : transition;
+    var type = widget.animationType;
+    Widget animationWidget = FadeTransition(opacity: animation, child: child);
+
+    //select different animation
+    if (type == SmartAnimationType.fade) {
+      animationWidget = FadeTransition(opacity: animation, child: child);
+    } else if (type == SmartAnimationType.scale) {
+      animationWidget = ScaleTransition(scale: animation, child: child);
+    } else if (type == SmartAnimationType.centerFade_otherSlide) {
+      if (widget.alignment == Alignment.center) {
+        animationWidget = FadeTransition(opacity: animation, child: child);
+      } else {
+        animationWidget = SlideTransition(
+          position: tw.animate(_ctrlBody),
+          child: child,
+        );
+      }
+    } else if (type == SmartAnimationType.centerScale_otherSlide) {
+      if (widget.alignment == Alignment.center) {
+        animationWidget = ScaleTransition(scale: animation, child: child);
+      } else {
+        animationWidget = SlideTransition(
+          position: tw.animate(_ctrlBody),
+          child: child,
+        );
+      }
+    }
+    return animationWidget;
   }
 
   ///处理下内容widget动画方向

pubspec.yaml

@@ -3,7 +3,7 @@ description:
   An elegant Flutter Dialog solution,
   Easily implement Toast, Loading and custom Dialog,
   Make the use of the dialog easier!
-version: 4.3.5
+version: 4.3.6
 homepage: https://github.com/fluttercandies/flutter_smart_dialog
 #flutter pub publish --server=https://pub.dartlang.org