flutter进度条动画

dart 复制代码
import 'dart:async';
import 'package:jade/configs/PathConfig.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class JadeLinearProgressIndicator extends StatefulWidget {
  final double currentProgress;
  JadeLinearProgressIndicator(this.currentProgress);
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _JadeLinearProgressIndicatorState();
  }
}

class _JadeLinearProgressIndicatorState extends State<JadeLinearProgressIndicator> with TickerProviderStateMixin {


  // 动画相关控制器与补间。
  AnimationController animation;
  Tween<double> tween;

  GlobalKey _keyOffset = GlobalKey();

  Timer _timer;
  int _animationIndex = 0;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animation = AnimationController(
        // 这个动画应该持续的时间长短。
        duration: const Duration(milliseconds: 900),
        vsync: this)
      ..addListener(() {
        setState(() {});
      });
    tween = Tween<double>(
      begin: 0.0,
      end: widget.currentProgress >1.0? 1.0 : widget.currentProgress,
    );
    // 开始向前运行这个动画(朝向最后)
    animation.forward();
    _processAnimation();
  }


  @override
  void dispose() {
    // TODO: implement dispose
    animation.dispose();
    _cancelTimer();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      alignment: Alignment.centerLeft,
      children: [
        Container(
          width: 250.w,
          height: 32.w,
          margin: EdgeInsets.only(left: 14.w),
          child: Stack(
            children: [
              Positioned.fill(
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    child: Container(
                      color: JadeColors.grey_13,
                      child: ListView.separated(
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index) => Icon(Icons.navigate_next,
                            color: index == _animationIndex?JadeColors.orange:Colors.white,size: 16,),
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          separatorBuilder: (context,index) =>Container(width: 16.w,),
                          itemCount: 6),
                    ),
                  )),
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                child: Align(
                  widthFactor: tween.animate(animation).value,
                  child: Container(
                    key: _keyOffset,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [JadeColors.blue,JadeColors.blue_8],
                            begin: Alignment.centerLeft,end: Alignment.centerRight
                        )
                    ),
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                child: Text('${((widget.currentProgress > 1.0 ? 1.0: widget.currentProgress) * 100).toStringAsFixed(2)}%',
                  style: TextStyle(color: Colors.white,fontSize: 24.sp,fontFamily: 'PingFang'),),
              )
            ],
          ),
        ),
        Image.asset(PathConfig.iconFireBlue,width: 32.w,)
      ],
    );
  }

  //进度条箭头动画
  _processAnimation(){
    _timer = Timer.periodic(Duration(milliseconds: 100), (timer){
      _animationIndex ++;
      if(_animationIndex == 6){
        _animationIndex = 0;
      }
      setState(() {});
    });
  }

  _cancelTimer(){
    if(_timer !=null && _timer.isActive){
      _timer.cancel();
      _timer = null;
    }
  }
}
相关推荐
coooliang8 小时前
Flutter 中的单例模式
javascript·flutter·单例模式
coooliang8 小时前
Flutter项目中设置安卓启动页
android·flutter
JIngles1238 小时前
flutter将utf-8编码的字节序列转换为中英文字符串
java·javascript·flutter
B.-11 小时前
在 Flutter 中实现文件读写
开发语言·学习·flutter·android studio·xcode
freflying111920 小时前
使用jenkins构建Android+Flutter项目依赖自动升级带来兼容性问题及Jenkins构建速度慢问题解决
android·flutter·jenkins
机器瓦力1 天前
Flutter应用开发:对象存储管理图片
flutter
江上清风山间明月1 天前
Flutter最简单的路由管理方式Navigator
android·flutter·ios·路由·页面管理·navigator
weixin_411191841 天前
FlutterAssetsGenerator插件的使用
flutter
神秘_博士2 天前
自制AirTag,支持安卓/鸿蒙/PC/Home Assistant,无需拥有iPhone
arm开发·python·物联网·flutter·docker·gitee
陈皮话梅糖@2 天前
Flutter 网络请求与数据处理:从基础到单例封装
flutter·网络请求