关于flutter:flutter-flutteranimationprogressbar-实现倒计时

前言:
人生无奈????,生生把我这个做java 的逼成了全栈????,最近的一个教育app,本着想要多简略就做多简略的准则,和我搭档的前端帅小哥做了个究极半成品进去????,就我这暴脾气,默默地开始了优化,首先就从倒计时开始。前端帅小哥用的是 circular_countdown 来做倒计时


看起来貌似也还行哦,然而可能是我先入为主的缘故,因为之前看过一个相似的app,是进度条式的倒计时,所以感觉这个很难看,而后再面对着单色调的app界面,帅小哥那种搪塞跃然app上。查了一圈,我也没发现进度条式的flutter插件,只能通过 flutter_animation_progress_bar 来实现了(小弟很弱鸡,大牛轻点喷)


  1. 引入 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:尽管还是丑,但曾经好多了????

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理