共计 1477 个字符,预计需要花费 4 分钟才能阅读完成。
前言:
人生无奈????,生生把我这个做 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: 尽管还是丑,但曾经好多了????
正文完