flutter怎么实现倒计时加载页面

本篇内容主要讲解“Flutter怎么实现倒计时加载页面”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“flutter怎么实现倒计时加载页面”吧!

效果图

实现步骤

pubspec.yaml中添加依赖 flustars，该包的TimelineUtil和TimerUtil类可以实现计时功能

dependencies:  flustars: ^0.3.3

!注意空格哦

2、代码实现

初始化TimerUtil

late TimerUtil util;  double current_time = 0;void initState() {    super.initState();    util = new TimerUtil(mInterval: 18, mTotalTime: 5000);    util.setOnTimerTickCallback((millisUntilFinished) {      setState(() {        //每次时间间隔回调,把每次当前总时间ms除以1000就是秒        current_time = millisUntilFinished / 1000;        //倒计时结束时 跳转到首页 当然也可以等待资源加载完成再跳转        if (current_time == 0) {                    //跳转到首页          Navigator.push(              context, MaterialPageRoute(builder: (context) => HomePage()));        }      });    });

构造页面

 Widget build(BuildContext context) {    return Scaffold(        body: Column(      children: [        Image.asset('images/2.0/beijing.jpg'),        Container(          alignment: Alignment.centerRight,          child: SizedBox(              height: 50,              width: 50,              child: Stack(                children: [                  Center(child: CircularProgressIndicator(                    value: current_time == 5.0 ? 0 : (5 - current_time) / 5,                  ),),                  Center(child: Text('${current_time.toInt()}'),)                ],)          ),        ),      ],    ));  }

完整代码

import 'package:flustars/flustars.dart';import 'package:flutter/material.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: LoadingPage(),    );  }}class LoadingPage extends StatefulWidget {  const LoadingPage({Key? key}) : super(key: key);  @override  _LoadingPageState createState() => _LoadingPageState();}   class _LoadingPageState extends State<LoadingPage> {  late TimerUtil util; //计时对象  double current_time = 0; //当前时间  @override  Widget build(BuildContext context) {    return Scaffold(        body: Column(      children: [        Image.asset('images/2.0/beijing.jpg'),        Container(          alignment: Alignment.centerRight,          child: SizedBox(              height: 50,              width: 50,              child: Stack(                children: [                  Center(child: CircularProgressIndicator(                    value: current_time == 5.0 ? 0 : (5 - current_time) / 5,                  ),),                  Center(child: Text('${current_time.toInt()}'),)                ],)          ),        ),      ],    ));  }  @override  void initState() {    super.initState();    util = new TimerUtil(mInterval: 18, mTotalTime: 5000);    util.setOnTimerTickCallback((millisUntilFinished) {      setState(() {        //每次时间间隔回调,把每次当前总时间ms除以1000就是秒        current_time = millisUntilFinished / 1000;        //倒计时结束时 跳转到首页 当然也可以等待资源加载完成再跳转        if (current_time == 0) {                    //跳转到首页          Navigator.push(              context, MaterialPageRoute(builder: (context) => HomePage()));        }      });    });    //开始倒计时    util.startCountDown();  }}class HomePage extends StatelessWidget {  const HomePage({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('HomePage'),      ),    );  }}

到此，相信大家对“flutter怎么实现倒计时加载页面”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！