前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其他成熟框架還略有不足，但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生態越來越完善，輪子越來越多。
本系列文章準備了超過50個輪子推薦，工作原因，儘量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網
正文
輪子
功能概述
- 圓形百分比進度
- 線形百分比進度
- 切換動畫
- 自定義動畫的持續時間
- 基於百分比值的進度
- 進度和背景色
- 自定義大小
- 左，右或居中子項用於線性百分比指示器
- 圓形百分比指示器的頂部，底部或中心widget
- 使用漸變色
安裝
yaml
1
2
|
dependencies:
percent_indicator: ^2.1.1+1
|
dart
1
|
import 'package:percent_indicator/percent_indicator.dart';
|
使用
圓形進度
基礎使用
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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,
)
|
頭部標題+動畫：
dart
1
2
3
4
5
6
7
8
9
10
11
|
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,
),
|
底部文案+動畫+圓角截斷：
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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,
)
|
線型進度
基礎使用：
dart
1
2
3
4
5
6
7
|
new LinearPercentIndicator(
width: 300,
lineHeight: 14.0,
percent: 0.5,
backgroundColor: Colors.grey,
progressColor: Colors.blue,
),
|
線型進度+進度數字：
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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,
)
|
線型進度+進度數字+左右內容+動畫+矩形邊框：
dart
1
2
3
4
5
6
7
8
9
10
11
12
|
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,
)
|
更多用法可自行參考輪子文檔中的參數定製。
結尾
