我正在尝试为其中的自定义对话框设置动画,dart以便当它弹出时创建一些动画。有一个Android带有动画对话框的库,“ Sweet Alert 对话框”中是否有任何类似的库Flutter
dart
Flutter
我们如何才能在颤振中实现相同的功能?
要创建对话框,可以使用Overlay 或Dialog类。如果要像在给定框架中那样添加动画,则可以像以下示例中那样使用AnimationController。该 CurvedAnimation类是用于创建动画的弹跳效果。
更新:通常,最好使用showDialog函数显示对话框,因为关闭和手势由Flutter处理。我已经更新了该示例,该示例现在与之一起运行,showDialog您可以通过点击背景来关闭对话框。
showDialog
弹跳对话框动画
您可以将以下代码复制并粘贴到新项目中并进行调整。它本身是可运行的。
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(title: 'Flutter Demo', theme: ThemeData(), home: Page()); } } class Page extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton.icon( onPressed: () { showDialog( context: context, builder: (_) => FunkyOverlay(), ); }, icon: Icon(Icons.message), label: Text("PopUp!")), ), ); } } class FunkyOverlay extends StatefulWidget { @override State<StatefulWidget> createState() => FunkyOverlayState(); } class FunkyOverlayState extends State<FunkyOverlay> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> scaleAnimation; @override void initState() { super.initState(); controller = AnimationController(vsync: this, duration: Duration(milliseconds: 450)); scaleAnimation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut); controller.addListener(() { setState(() {}); }); controller.forward(); } @override Widget build(BuildContext context) { return Center( child: Material( color: Colors.transparent, child: ScaleTransition( scale: scaleAnimation, child: Container( decoration: ShapeDecoration( color: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15.0))), child: Padding( padding: const EdgeInsets.all(50.0), child: Text("Well hello there!"), ), ), ), ), ); } }