Flutter 动态进度条

视图比较粗糙，凑合看

需要引入依赖： percent_indicator: ^2.1.1+1

Pasted Graphic.jpg

import 'package:percent_indicator/percent_indicator.dart';
//圆形进度条&&动画&&渐变色

 CircularPercentIndicator(

 radius: 190.0,

 lineWidth: 13.0,

 animation: true,

 animationDuration: 1000,//动画时长

  percent: 0.5,//设置比例

  center: Column(

   mainAxisAlignment: MainAxisAlignment.center,

   children: [

  //自定义 view                                          

  ],

  ),

circularStrokeCap: CircularStrokeCap.round,

backgroundColor: Color.fromRGBO(39, 153, 93, 0.2),

linearGradient: LinearGradient(

begin: Alignment.topCenter,

end: Alignment.bottomCenter,

colors: [

Color.fromRGBO(39, 153, 93, 0.1),

Color.fromRGBO(39, 153, 93, 1)

],

)),

pEt VEnon.jpg

//线形进度条&&动画&&渐变色

LinearPercentIndicator(

 width: MediaQuery.of(context).size.width -

46,

lineHeight: 8.0,

percent: 0.3,//设置比例

animation: true,

animationDuration: 1000,//动画时长

backgroundColor:

Color.fromRGBO(238, 238, 238, 1),

linearGradient: LinearGradient(

begin: Alignment.centerLeft,

end: Alignment.centerRight,

colors: [

Color.fromRGBO(39, 153, 93, 0.1),

 Color.fromRGBO(39, 153, 93, 1)

],

),

),

整理不易，给个赞谢谢！