增加弹窗动画

Author: AndroidHensen

example/lib/main.dart

@@ -141,7 +141,18 @@ showAlertDialog(BuildContext context) {
         Text("5、dialog animation"),
         Row(
           children: <Widget>[
-            makeTextButton("scaleIn", () {}),
+            makeTextButton("scaleIn", () {
+              YYAlertDialogWithScaleIn(context);
+            }),
+            makeTextButton("fadeIn", () {
+              YYAlertDialogWithFadeIn(context);
+            }),
+            makeTextButton("rotateIn", () {
+              YYAlertDialogWithRotateIn(context);
+            }),
+            makeTextButton("customIn", () {
+              YYAlertDialogWithCustomIn(context);
+            }),
           ],
         ),
       ],

lib/components/example/alert_dialog.dart

@@ -245,3 +245,163 @@ YYDialog YYAlertDialogWithGravity(
     )
     ..show();
 }
+
+YYDialog YYAlertDialogWithScaleIn(BuildContext context) {
+  return YYDialog().build(context)
+    ..width = 240
+    ..borderRadius = 4.0
+    ..duration = Duration(milliseconds: 500)
+    ..animatedFunc = (child, animation) {
+      return ScaleTransition(
+        child: child,
+        scale: Tween(begin: 0.0, end: 1.0).animate(animation),
+      );
+    }
+    ..text(
+      padding: EdgeInsets.all(18.0),
+      text: "Dialog header",
+      color: Colors.black,
+      fontSize: 18.0,
+      fontWeight: FontWeight.w500,
+    )
+    ..text(
+      padding: EdgeInsets.only(left: 18.0, right: 18.0),
+      text: "Dialog body text",
+      color: Colors.grey[500],
+    )
+    ..doubleButton(
+      padding: EdgeInsets.only(top: 24.0),
+      gravity: Gravity.center,
+      text1: "ACTION 1",
+      color1: Colors.deepPurpleAccent,
+      fontSize1: 14.0,
+      text2: "ACTION 2",
+      color2: Colors.deepPurpleAccent,
+      fontSize2: 14.0,
+    )
+    ..show();
+}
+
+YYDialog YYAlertDialogWithFadeIn(BuildContext context) {
+  return YYDialog().build(context)
+    ..width = 240
+    ..borderRadius = 4.0
+    ..duration = Duration(milliseconds: 500)
+    ..animatedFunc = (child, animation) {
+      return FadeTransition(
+        child: child,
+        opacity: Tween(begin: 0.0, end: 1.0).animate(animation),
+      );
+    }
+    ..text(
+      padding: EdgeInsets.all(18.0),
+      text: "Dialog header",
+      color: Colors.black,
+      fontSize: 18.0,
+      fontWeight: FontWeight.w500,
+    )
+    ..text(
+      padding: EdgeInsets.only(left: 18.0, right: 18.0),
+      text: "Dialog body text",
+      color: Colors.grey[500],
+    )
+    ..doubleButton(
+      padding: EdgeInsets.only(top: 24.0),
+      gravity: Gravity.center,
+      text1: "ACTION 1",
+      color1: Colors.deepPurpleAccent,
+      fontSize1: 14.0,
+      text2: "ACTION 2",
+      color2: Colors.deepPurpleAccent,
+      fontSize2: 14.0,
+    )
+    ..show();
+}
+
+YYDialog YYAlertDialogWithRotateIn(BuildContext context) {
+  return YYDialog().build(context)
+    ..width = 240
+    ..borderRadius = 4.0
+    ..duration = Duration(milliseconds: 500)
+    ..animatedFunc = (child, animation) {
+      return RotationTransition(
+        child: child,
+        turns: Tween(begin: 0.0, end: 3.0).animate(animation),
+      );
+    }
+    ..text(
+      padding: EdgeInsets.all(18.0),
+      text: "Dialog header",
+      color: Colors.black,
+      fontSize: 18.0,
+      fontWeight: FontWeight.w500,
+    )
+    ..text(
+      padding: EdgeInsets.only(left: 18.0, right: 18.0),
+      text: "Dialog body text",
+      color: Colors.grey[500],
+    )
+    ..doubleButton(
+      padding: EdgeInsets.only(top: 24.0),
+      gravity: Gravity.center,
+      text1: "ACTION 1",
+      color1: Colors.deepPurpleAccent,
+      fontSize1: 14.0,
+      text2: "ACTION 2",
+      color2: Colors.deepPurpleAccent,
+      fontSize2: 14.0,
+    )
+    ..show();
+}
+
+YYDialog YYAlertDialogWithCustomIn(BuildContext context) {
+  return YYDialog().build(context)
+    ..width = 240
+    ..borderRadius = 4.0
+    ..duration = Duration(milliseconds: 500)
+    ..animatedFunc = (child, animation) {
+      return Transform(
+        alignment: Alignment.center,
+        transform: Matrix4.identity()
+          ..translate(
+            0.0,
+            Tween<double>(begin: -50.0, end: 50.0)
+                .animate(
+                  CurvedAnimation(curve: Interval(0.1, 0.5), parent: animation),
+                )
+                .value,
+          )
+          ..scale(
+            Tween<double>(begin: 0.5, end: 1.0)
+                .animate(
+                  CurvedAnimation(curve: Interval(0.5, 0.9), parent: animation),
+                )
+                .value,
+          ),
+        child: child,
+      );
+    }
+    ..text(
+      padding: EdgeInsets.all(18.0),
+      text: "Dialog header",
+      color: Colors.black,
+      fontSize: 18.0,
+      fontWeight: FontWeight.w500,
+    )
+    ..text(
+      padding: EdgeInsets.only(left: 18.0, right: 18.0),
+      text: "Dialog body text",
+      color: Colors.grey[500],
+    )
+    ..doubleButton(
+      padding: EdgeInsets.only(top: 24.0),
+      gravity: Gravity.center,
+      text1: "ACTION 1",
+      color1: Colors.deepPurpleAccent,
+      fontSize1: 14.0,
+      text2: "ACTION 2",
+      color2: Colors.deepPurpleAccent,
+      fontSize2: 14.0,
+    )
+    ..show();
+}

lib/flutter_custom_dialog.dart

@@ -17,7 +17,7 @@ class YYDialog {
   Color backgroundColor = Colors.white; //弹窗内的背景色
   double borderRadius = 0.0; //弹窗圆角
   BoxConstraints constraints; //弹窗约束
-  AnimatedWidget animatedWidget; //弹窗出现的动画
+  Function(Widget child, Animation<double> animation) animatedFunc; //弹窗出现的动画
   bool barrierDismissible = true; //是否点击弹出外部消失
   //============================================================================
 
@@ -209,15 +209,14 @@ class YYDialog {
   }
 
   void show() {
-    print("YYDialog ==> show()");
     var mainAxisAlignment = getColumnMainAxisAlignment(gravity);
     var crossAxisAlignment = getColumnCrossAxisAlignment(gravity);
     Size size = MediaQuery.of(context).size;
     CustomDialog(
       gravity: gravity,
       context: context,
       barrierColor: barrierColor,
-      animatedWidget: animatedWidget,
+      animatedFunc: animatedFunc,
       barrierDismissible: barrierDismissible,
       duration: duration,
       child: Column(
@@ -326,7 +325,7 @@ class CustomDialog {
   RouteTransitionsBuilder _transitionsBuilder;
   bool _barrierDismissible;
   Gravity _gravity;
-  AnimatedWidget _animatedWidget;
+  Function _animatedFunc;
 
   CustomDialog({
     @required Widget child,
@@ -335,13 +334,14 @@ class CustomDialog {
     Color barrierColor,
     RouteTransitionsBuilder transitionsBuilder,
     Gravity gravity,
-    AnimatedWidget animatedWidget,
+    Function animatedFunc,
     bool barrierDismissible,
   })  : _child = child,
         _context = context,
         _gravity = gravity,
         _duration = duration,
         _barrierColor = barrierColor,
+        _animatedFunc = animatedFunc,
         _transitionsBuilder = transitionsBuilder,
         _barrierDismissible = barrierDismissible {
     this.show();
@@ -408,10 +408,13 @@ class CustomDialog {
         break;
     }
 
-    return _animatedWidget ??
-        SlideTransition(
-          position: custom,
-          child: child,
-        );
+    if (_animatedFunc != null) {
+      return _animatedFunc(child, animation);
+    }
+
+    return SlideTransition(
+      position: custom,
+      child: child,
+    );
   }
 }