flutter进度条动画

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;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132