我正在try 在dart
中制作一个自定义对话框的动画,这样当它弹出时,就可以创建一些动画.Android
中有一个有动画对话框的库,Flutter
Sweet Alert Dialog中有没有类似的库
我们如何在Flutter 中实现相同的功能?
我正在try 在dart
中制作一个自定义对话框的动画,这样当它弹出时,就可以创建一些动画.Android
中有一个有动画对话框的库,Flutter
Sweet Alert Dialog中有没有类似的库
我们如何在Flutter 中实现相同的功能?
要创建对话框,可以使用Overlay or Dialog类.如果您想要添加类似于给定框架中的动画,您可以使用AnimationController,如下例所示.CurvedAnimation类用于在动画上创建反弹效果.
Update:一般来说,最好用showDialog函数来显示对话框,因为关闭和手势都是由FIFTH处理的.我已经更新了示例,它现在以showDialog
运行,您可以通过点击背景来打开close对话框.
您可以将以下代码复制粘贴到新项目中并对其进行调整(&;P).它可以自己运行.
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!"),
),
),
),
),
);
}
}