Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 76edb7c

Browse files
增加弹窗动画
1 parent 6829970 commit 76edb7c

File tree

3 files changed

+185
-11
lines changed

3 files changed

+185
-11
lines changed

‎example/lib/main.dart‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,18 @@ showAlertDialog(BuildContext context) {
141141
Text("5、dialog animation"),
142142
Row(
143143
children: <Widget>[
144-
makeTextButton("scaleIn", () {}),
144+
makeTextButton("scaleIn", () {
145+
YYAlertDialogWithScaleIn(context);
146+
}),
147+
makeTextButton("fadeIn", () {
148+
YYAlertDialogWithFadeIn(context);
149+
}),
150+
makeTextButton("rotateIn", () {
151+
YYAlertDialogWithRotateIn(context);
152+
}),
153+
makeTextButton("customIn", () {
154+
YYAlertDialogWithCustomIn(context);
155+
}),
145156
],
146157
),
147158
],

‎lib/components/example/alert_dialog.dart‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,3 +245,163 @@ YYDialog YYAlertDialogWithGravity(
245245
)
246246
..show();
247247
}
248+
249+
YYDialog YYAlertDialogWithScaleIn(BuildContext context) {
250+
return YYDialog().build(context)
251+
..width = 240
252+
..borderRadius = 4.0
253+
..duration = Duration(milliseconds: 500)
254+
..animatedFunc = (child, animation) {
255+
return ScaleTransition(
256+
child: child,
257+
scale: Tween(begin: 0.0, end: 1.0).animate(animation),
258+
);
259+
}
260+
..text(
261+
padding: EdgeInsets.all(18.0),
262+
text: "Dialog header",
263+
color: Colors.black,
264+
fontSize: 18.0,
265+
fontWeight: FontWeight.w500,
266+
)
267+
..text(
268+
padding: EdgeInsets.only(left: 18.0, right: 18.0),
269+
text: "Dialog body text",
270+
color: Colors.grey[500],
271+
)
272+
..doubleButton(
273+
padding: EdgeInsets.only(top: 24.0),
274+
gravity: Gravity.center,
275+
text1: "ACTION 1",
276+
color1: Colors.deepPurpleAccent,
277+
fontSize1: 14.0,
278+
text2: "ACTION 2",
279+
color2: Colors.deepPurpleAccent,
280+
fontSize2: 14.0,
281+
)
282+
..show();
283+
}
284+
285+
YYDialog YYAlertDialogWithFadeIn(BuildContext context) {
286+
return YYDialog().build(context)
287+
..width = 240
288+
..borderRadius = 4.0
289+
..duration = Duration(milliseconds: 500)
290+
..animatedFunc = (child, animation) {
291+
return FadeTransition(
292+
child: child,
293+
opacity: Tween(begin: 0.0, end: 1.0).animate(animation),
294+
);
295+
}
296+
..text(
297+
padding: EdgeInsets.all(18.0),
298+
text: "Dialog header",
299+
color: Colors.black,
300+
fontSize: 18.0,
301+
fontWeight: FontWeight.w500,
302+
)
303+
..text(
304+
padding: EdgeInsets.only(left: 18.0, right: 18.0),
305+
text: "Dialog body text",
306+
color: Colors.grey[500],
307+
)
308+
..doubleButton(
309+
padding: EdgeInsets.only(top: 24.0),
310+
gravity: Gravity.center,
311+
text1: "ACTION 1",
312+
color1: Colors.deepPurpleAccent,
313+
fontSize1: 14.0,
314+
text2: "ACTION 2",
315+
color2: Colors.deepPurpleAccent,
316+
fontSize2: 14.0,
317+
)
318+
..show();
319+
}
320+
321+
YYDialog YYAlertDialogWithRotateIn(BuildContext context) {
322+
return YYDialog().build(context)
323+
..width = 240
324+
..borderRadius = 4.0
325+
..duration = Duration(milliseconds: 500)
326+
..animatedFunc = (child, animation) {
327+
return RotationTransition(
328+
child: child,
329+
turns: Tween(begin: 0.0, end: 3.0).animate(animation),
330+
);
331+
}
332+
..text(
333+
padding: EdgeInsets.all(18.0),
334+
text: "Dialog header",
335+
color: Colors.black,
336+
fontSize: 18.0,
337+
fontWeight: FontWeight.w500,
338+
)
339+
..text(
340+
padding: EdgeInsets.only(left: 18.0, right: 18.0),
341+
text: "Dialog body text",
342+
color: Colors.grey[500],
343+
)
344+
..doubleButton(
345+
padding: EdgeInsets.only(top: 24.0),
346+
gravity: Gravity.center,
347+
text1: "ACTION 1",
348+
color1: Colors.deepPurpleAccent,
349+
fontSize1: 14.0,
350+
text2: "ACTION 2",
351+
color2: Colors.deepPurpleAccent,
352+
fontSize2: 14.0,
353+
)
354+
..show();
355+
}
356+
357+
YYDialog YYAlertDialogWithCustomIn(BuildContext context) {
358+
return YYDialog().build(context)
359+
..width = 240
360+
..borderRadius = 4.0
361+
..duration = Duration(milliseconds: 500)
362+
..animatedFunc = (child, animation) {
363+
return Transform(
364+
alignment: Alignment.center,
365+
transform: Matrix4.identity()
366+
..translate(
367+
0.0,
368+
Tween<double>(begin: -50.0, end: 50.0)
369+
.animate(
370+
CurvedAnimation(curve: Interval(0.1, 0.5), parent: animation),
371+
)
372+
.value,
373+
)
374+
..scale(
375+
Tween<double>(begin: 0.5, end: 1.0)
376+
.animate(
377+
CurvedAnimation(curve: Interval(0.5, 0.9), parent: animation),
378+
)
379+
.value,
380+
),
381+
child: child,
382+
);
383+
}
384+
..text(
385+
padding: EdgeInsets.all(18.0),
386+
text: "Dialog header",
387+
color: Colors.black,
388+
fontSize: 18.0,
389+
fontWeight: FontWeight.w500,
390+
)
391+
..text(
392+
padding: EdgeInsets.only(left: 18.0, right: 18.0),
393+
text: "Dialog body text",
394+
color: Colors.grey[500],
395+
)
396+
..doubleButton(
397+
padding: EdgeInsets.only(top: 24.0),
398+
gravity: Gravity.center,
399+
text1: "ACTION 1",
400+
color1: Colors.deepPurpleAccent,
401+
fontSize1: 14.0,
402+
text2: "ACTION 2",
403+
color2: Colors.deepPurpleAccent,
404+
fontSize2: 14.0,
405+
)
406+
..show();
407+
}

‎lib/flutter_custom_dialog.dart‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class YYDialog {
1717
Color backgroundColor = Colors.white; //弹窗内的背景色
1818
double borderRadius = 0.0; //弹窗圆角
1919
BoxConstraints constraints; //弹窗约束
20-
AnimatedWidget animatedWidget; //弹窗出现的动画
20+
Function(Widget child, Animation<double> animation) animatedFunc; //弹窗出现的动画
2121
bool barrierDismissible = true; //是否点击弹出外部消失
2222
//============================================================================
2323

@@ -209,15 +209,14 @@ class YYDialog {
209209
}
210210

211211
void show() {
212-
print("YYDialog ==> show()");
213212
var mainAxisAlignment = getColumnMainAxisAlignment(gravity);
214213
var crossAxisAlignment = getColumnCrossAxisAlignment(gravity);
215214
Size size = MediaQuery.of(context).size;
216215
CustomDialog(
217216
gravity: gravity,
218217
context: context,
219218
barrierColor: barrierColor,
220-
animatedWidget: animatedWidget,
219+
animatedFunc: animatedFunc,
221220
barrierDismissible: barrierDismissible,
222221
duration: duration,
223222
child: Column(
@@ -326,7 +325,7 @@ class CustomDialog {
326325
RouteTransitionsBuilder _transitionsBuilder;
327326
bool _barrierDismissible;
328327
Gravity _gravity;
329-
AnimatedWidget _animatedWidget;
328+
Function _animatedFunc;
330329

331330
CustomDialog({
332331
@required Widget child,
@@ -335,13 +334,14 @@ class CustomDialog {
335334
Color barrierColor,
336335
RouteTransitionsBuilder transitionsBuilder,
337336
Gravity gravity,
338-
AnimatedWidget animatedWidget,
337+
Function animatedFunc,
339338
bool barrierDismissible,
340339
}) : _child = child,
341340
_context = context,
342341
_gravity = gravity,
343342
_duration = duration,
344343
_barrierColor = barrierColor,
344+
_animatedFunc = animatedFunc,
345345
_transitionsBuilder = transitionsBuilder,
346346
_barrierDismissible = barrierDismissible {
347347
this.show();
@@ -408,10 +408,13 @@ class CustomDialog {
408408
break;
409409
}
410410

411-
return _animatedWidget ??
412-
SlideTransition(
413-
position: custom,
414-
child: child,
415-
);
411+
if (_animatedFunc != null) {
412+
return _animatedFunc(child, animation);
413+
}
414+
415+
return SlideTransition(
416+
position: custom,
417+
child: child,
418+
);
416419
}
417420
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /