我正在尝试在dart中设置自定义对话框的动画,以便在弹出它时创建一些动画.
Android中有一个带有动画对话框的库,Flutter
Sweet Alert Dialog中是否有类似的库
我们怎样才能在颤动中实现相同的功能?
解决方法
要创建对话框,可以使用
Overlay或
Dialog类.如果要在给定框架中添加动画,可以使用
AnimationController,如下例所示.
CurvedAnimation类用于创建动画的弹跳效果:
你可以复制&将以下代码粘贴到新项目中并进行调整.它可以自己运行.
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: () { Navigator.of(context) .overlay .insert(OverlayEntry(builder: (BuildContext context) { return 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> opacityAnimation; Animation<double> scaleAnimatoin; @override void initState() { super.initState(); controller = AnimationController(vsync: this,duration: Duration(milliseconds: 450)); opacityAnimation = Tween<double>(begin: 0.0,end: 0.4).animate(CurvedAnimation(parent: controller,curve: Curves.fastOutSlowIn)); scaleAnimatoin = CurvedAnimation(parent: controller,curve: Curves.elasticInOut); controller.addListener(() { setState(() { }); }); controller.forward(); } @override Widget build(BuildContext context) { return Material( color: Colors.black.withOpacity(opacityAnimation.value),child: Center( child: ScaleTransition( scale: scaleAnimatoin,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!"),); } }