flutter圆形或线型进度条

谁践踏了优雅 2022-12-28 07:48 235阅读 0赞

## 前言 ##

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：[flutter官网][flutter]

## 正文 ##

### 轮子 ###

*  轮子名称：percent\_indicator
 *  轮子概述：flutter一个圆形和线形的进度条.
 *  轮子作者：[diego.velasquez.lopez@gmail.com][diego.velasquez.lopez_gmail.com]
 *  推荐指数：★★★★
 *  常用指数：★★★
 *  效果预览：[![效果图][ba57f43836c72ec814f2922398816739.gif]][ba57f43836c72ec814f2922398816739.gif 1]
    
    [效果图][ba57f43836c72ec814f2922398816739.gif 1]

### 功能概述 ###

*  圆形百分比进度
 *  线形百分比进度
 *  切换动画
 *  自定义动画的持续时间
 *  基于百分比值的进度
 *  进度和背景色
 *  自定义大小
 *  左，右或居中子项用于线性百分比指示器
 *  圆形百分比指示器的顶部，底部或中心widget
 *  使用渐变色

### 安装 ###

yaml

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
</pre> </td> 
   <td> <pre>dependencies:
  percent_indicator: ^2.1.1+1
</pre> </td> 
  </tr> 
 </tbody> 
</table>

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
</pre> </td> 
   <td> <pre>import 'package:percent_indicator/percent_indicator.dart';
</pre> </td> 
  </tr> 
 </tbody> 
</table>

### 使用 ###

圆形进度

基础使用

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre> </td> 
   <td> <pre>new CircularPercentIndicator(
    radius: 60.0, //大小
    lineWidth: 5.0,//指示线条大小
    percent: 1.0,//当前进度
    center: new Text("100%"),//中心widget 可以是文字 或其他widget 如何icon
    progressColor: Colors.green, //进度条颜色
    ....
)
头部标题+icon内容+背景色：
```dart
new CircularPercentIndicator(
    radius: 100.0,
    lineWidth: 10.0,
    percent: 0.8,
    header: new Text("Icon header"),
    center: new Icon(
        Icons.person_pin,
        size: 50.0,
        color: Colors.blue,
    ),
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
)
</pre> </td> 
  </tr> 
 </tbody> 
</table>

头部标题+动画：

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
</pre> </td> 
   <td> <pre>new CircularPercentIndicator(
    radius: 130.0,
    animation: true,
    animationDuration: 1200,
    lineWidth: 15.0,
    percent: 0.4,
    center: new Text("40 hours",style:new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
    circularStrokeCap: CircularStrokeCap.butt,
    backgroundColor: Colors.yellow,
    progressColor: Colors.red,
),
</pre> </td> 
  </tr> 
 </tbody> 
</table>

底部文案+动画+圆角截断：

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre> </td> 
   <td> <pre>new CircularPercentIndicator(
    radius: 120.0,
    lineWidth: 13.0,
    animation: true,
    percent: 0.7,
    center: new Text(
    "70.0%",
    style:
        new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
    ),
    footer: new Text(
    "Sales this week",
    style:
        new TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
    ),
    circularStrokeCap: CircularStrokeCap.round,
    progressColor: Colors.purple,
)
</pre> </td> 
  </tr> 
 </tbody> 
</table>

线型进度

基础使用：

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
</pre> </td> 
   <td> <pre>new LinearPercentIndicator(
    width: 300,
    lineHeight: 14.0,
    percent: 0.5,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
),
</pre> </td> 
  </tr> 
 </tbody> 
</table>

线型进度+进度数字：

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre> </td> 
   <td> <pre>new LinearPercentIndicator(
    width: 300,
    lineHeight: 14.0,
    percent: 0.5,
    center: Text(
    "50.0%",
    style: new TextStyle(fontSize: 12.0),
    ),
    trailing: Icon(Icons.mood),
    linearStrokeCap: LinearStrokeCap.roundAll,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
)
</pre> </td> 
  </tr> 
 </tbody> 
</table>

线型进度+进度数字+左右内容+动画+矩形边框：

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre> </td> 
   <td> <pre>new LinearPercentIndicator(
    width: 200,
    animation: true,
    animationDuration: 1000,
    lineHeight: 20.0,
    leading: new Text("左侧内容"),
    trailing: new Text("右侧内容"),
    percent: percent,
    center: Text((percent*100).toString()+'%'),
    linearStrokeCap: LinearStrokeCap.butt,
    progressColor: Colors.red,
)
</pre> </td> 
  </tr> 
 </tbody> 
</table>

更多用法可自行参考轮子文档中的参数定制。

## 结尾 ##

*  轮子仓库地址：[https://pub.flutter-io.cn/packages/percent\_indicator][https_pub.flutter-io.cn_packages_percent_indicator]
 *  系列演示demo源码：[https://github.com/826327700/flutter\_plugins\_demo][https_github.com_826327700_flutter_plugins_demo]

[flutter]: https://flutter-io.cn/
[diego.velasquez.lopez_gmail.com]: mailto:diego.velasquez.lopez@gmail.com
[ba57f43836c72ec814f2922398816739.gif]: https://img-blog.csdnimg.cn/img_convert/ba57f43836c72ec814f2922398816739.gif
[ba57f43836c72ec814f2922398816739.gif 1]: /images/20221120/6bfcdc61d61f43c1a6a231dd5b7f486d.png
[https_pub.flutter-io.cn_packages_percent_indicator]: https://pub.flutter-io.cn/packages/percent_indicator
[https_github.com_826327700_flutter_plugins_demo]: https://github.com/826327700/flutter_plugins_demo