dart - Flutter 自定义动画对话框
问题描述
我正在尝试为自定义对话框设置动画,dart
以便在弹出时创建一些动画。有一个库Android
有动画对话框,在Flutter
Sweet Alert Dialog中有没有类似的库
我们如何在颤振中实现相同的功能?
解决方案
要创建对话框,您可以使用Overlay 或 Dialog类。如果要在给定框架中添加动画,可以使用AnimationController,如下例所示。CurvedAnimation类用于在动画上创建弹跳效果。
更新:通常最好使用showDialog函数显示对话框,因为关闭和手势由 Flutter 处理。我已经更新了示例,它现在正在运行,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!"),
),
),
),
),
);
}
}
推荐阅读
- angular - 错误:未找到集合,同时使用 in-memory-web-api(不使用任何实时 api 或 json 数据)
- html - 水平增长的列表,元素间的分隔符,没有前置元素的项目符号,没有垂直对齐。如何?
- python - ValueError:找不到资源“C:\Users\loginname\Desktop\2020\chatbot\.data\data.json”
- javascript - 使用 $.append 时的 jQuery 脚本标签执行顺序
- flutter - 在 Flutter 中如何创建数据库和搜索功能?
- hibernate - Hibernate 5,具有 2 个限制的 where 子句的条件查询
- linux - 在linux中使用berkley数据包过滤器获取接口统计信息?
- javascript - 如何在 tabulator.js 中向嵌套表中添加新行
- python - 有没有办法在后台 Windows 终端中运行一个 jumpmotion python 脚本?
- uwp - 运行批处理脚本时未创建快捷方式