我想为一个小部件制作一个slide-down
动画。我从互联网上看到了很多例子,但没有一个符合我的要求。这就是我需要的。下面是我制作的自定义小部件。
Widget Toast(String content, ToastType type) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(50),
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
color: ToastColors[type.index],
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 20, top: 10, bottom: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ToastIcons[type.index],
SizedBox(
width: 15,
),
Flexible(
child: Text(
content,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
),
],
);
}
这是一个 toast 布局。我希望可以从应用程序内的任何地方访问它。这就是为什么我为此创建了单独的 dart
文件。
我想要什么? 显示小部件时,我希望 toast 布局向下滑动。我不想循环播放或反转动画。动画完成后,小部件必须保持在结束位置静止。
最佳答案
没关系。我想到了。首先,我创建了一个 StatefulWidget
并将其用作 showToastWidget
函数的子项。
这是 StatefulWidget
类
import 'package:flutter/material.dart';
class SlideToast extends StatefulWidget {
final Widget _toast;
SlideToast(this._toast);
@override
_SlideToastState createState() => _SlideToastState();
}
class _SlideToastState extends State<SlideToast> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _offsetFloat;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 350),
);
_offsetFloat =
Tween(begin: Offset(0.0, -0.03), end: Offset.zero).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
),
);
_offsetFloat.addListener(() {
setState(() {});
});
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SlideTransition(
position: _offsetFloat,
child: widget._toast,
);
}
}
必需的函数
,枚举
,列表
enum ToastType { Info, Warning, Success, Error }
const List<Color> ToastColors = [
Colors.blue,
Colors.orange,
Colors.green,
Colors.redAccent
];
const List<Icon> ToastIcons = [
Icon(
Icons.info,
color: Colors.white,
),
Icon(
Icons.info,
color: Colors.white,
),
Icon(
Icons.check_circle,
color: Colors.white,
),
Icon(
Icons.error,
color: Colors.white,
)
];
Widget Toast(String content, ToastType type) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 85),
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
color: ToastColors[type.index],
child: Padding(
padding:
const EdgeInsets.only(left: 15, right: 20, top: 10, bottom: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ToastIcons[type.index],
SizedBox(
width: 15,
),
Flexible(
child: Text(
content,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
),
],
);
}
最后像这样调用showToastWidget
showToastWidget(
Toast('Hello World!!!', ToastType.Warning),
duration: Duration(seconds: 1),
);
关于dart - 如何在 flutter 中做 widget 的下拉动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55734706/