前言:
人生无奈🙄,生生把我这个做java 的逼成了全栈🤧,最近的一个教育app,本着想要多简单就做多简单的原则,和我搭档的前端帅小哥做了个究极半成品出来😓,就我这暴脾气,默默地开始了优化,首先就从倒计时开始。前端帅小哥用的是 circular_countdown 来做倒计时
看起来貌似也还行哦,但是可能是我先入为主的缘故,因为之前看过一个类似的app,是进度条式的倒计时,所以感觉这个很难看,然后再面对着单色调的app界面,帅小哥那种敷衍跃然app上。查了一圈,我也没发现进度条式的flutter插件,只能通过 flutter_animation_progress_bar 来实现了(小弟很弱鸡,大牛轻点喷)
- 引入 flutter_animation_progress_bar 插件
dependencies:
flutter_animation_progress_bar: ^1.0.5
2.封装一个进度条倒计时
int _countdownNum = 0;
Widget countDown() {
return Align(
alignment: Alignment.bottomCenter,
child: Container(
child: FAProgressBar(
currentValue: _countdownNum,
maxValue: 59,
displayText: '秒',
backgroundColor: Color(0xff2ec987),
),
),
);
}
3.调用 countDown()
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/背景图3.jpg"),
fit: BoxFit.cover,
),
),
child: Scrollbar(
child: Container(
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(50, 0, 50, 90),
child: FutureBuilder(
future: _futureBuilderFuture,
builder: _buildFuture,
),
),
this.countDown()
],
),
))));
}
4.封装倒更新时间函数
void reGetCountdown() {
setState(() {
if (_countdownTimer != null) {
return;
}
_countdownNum--;
_countdownTimer = new Timer.periodic(new Duration(seconds: 1), (timer) {
setState(() {
if (_countdownNum > 0) {
_countdownNum--;
} else {
_countdownTimer.cancel();
_countdownTimer = null;
this.timeEnd();
}
});
});
});
}
5.最后在 initState 中调用这个函数
@override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations(
reGetCountdown();
}
效果如下:
ps:虽然还是丑,但已经好多了💩
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。