Flutter 中的Material 元件庫中提供了兩種進度指示器：LinearProgressIndicator和CircularProgressIndicator。
它們都可以同時用於精確的進度指示和模糊的進度指示，只不過進度條一個是線形的，一個是圓形的。
-
精確進度通常用於任務進度可以計算和預估的情況，比如：檔案下載；
-
模糊進度則使用者任務進度無法準確獲得的情況，如下拉重新整理，資料提交等。
LinearProgressIndicator
LinearProgressIndicator是一個線性、條狀的進度條，
原始碼示例
建構函式如下：
const LinearProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
String semanticsLabel,
String semanticsValue,
})
複製程式碼屬性解釋
value(重要)
用於指定進度條是精確的，還是模糊的
如果LinearProgressIndicator裡沒有寫value，那麼就是模糊的，反之就是精確的
你可以在外面定義一個值，然後在value中使用這個值，用來顯示當前進度的完成情況
backgroundColor、valueColor
backgroundColor是進度條的背景顏色
valueColor是進度條的顏色
程式碼示例：
Center(
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
// 模糊進度條(會執行一個動畫)
LinearProgressIndicator(
backgroundColor: Colors.grey[200], //進度條的背景顏色
valueColor: AlwaysStoppedAnimation(Colors.blue), //進度條的顏色
),
SizedBox(
height: 20,
),
//進度條顯示50%
LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .5,
)
],
),
);
複製程式碼執行效果：
CircularProgressIndicator
CircularProgressIndicator是一個圓形進度條
原始碼示例
建構函式如下：
const CircularProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
this.strokeWidth = 4.0,
String semanticsLabel,
String semanticsValue,
})
複製程式碼屬性解釋
這裡面的屬性和LinearProgressIndicator的屬性一樣，而且效果也一樣，只多了一個strokeWidth
strokeWidth
他是用於繪製圓的線條寬度。預設寬度是4
程式碼示例：
Center(
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
// 模糊進度條(會執行一個旋轉動畫)
CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
strokeWidth: 15, //線條寬度15
),
SizedBox(
height: 20,
),
//進度條顯示50%，會顯示一個半圓
CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .5,
),
],
),
);
複製程式碼執行效果：
自定義尺寸
通過上面的原始碼和例子，我們可以發現LinearProgressIndicator和CircularProgressIndicator並沒有提供設定進度條尺寸的引數；
如果我們希望LinearProgressIndicator的線細一些，或者希望CircularProgressIndicator的圓大一些該怎麼做？
其實LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作為繪製的邊界的。
我們可以通過尺寸限制類的元件，如ConstrainedBox、SizedBox 來指定尺寸。
程式碼示例：
Column(
children: <Widget>[
SizedBox(
height: 50,
),
// 線性進度條高度指定為3
SizedBox(
height: 3,
child: LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .5,
),
),
SizedBox(
height: 50,
),
// 圓形進度條直徑指定為100
SizedBox(
height: 100,
width: 100,
child: CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .7,
),
),
],
);
複製程式碼執行效果：
注：如果CircularProgressIndicator顯示空間的寬高不同，則會顯示為橢圓
程式碼示例：
SizedBox(
//這裡面設定的寬高不一樣
height: 100,
width: 150,
child: CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .7,
),
),
複製程式碼執行效果：
進度色動畫
前面說過可以通過valueColor對進度條顏色做動畫，關於動畫這裡就先不詳細說了
給出一個例子先看一下：
實現一個進度條在3秒內從紅色變成藍色的動畫：
import 'package:flutter/material.dart';
class CategoryPage extends StatefulWidget {
@override
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
@override
void initState() {
//動畫執行時間3秒
_animationController =
new AnimationController(vsync: this, duration: Duration(seconds: 3));
_animationController.forward();
_animationController.addListener(() => setState(() => {}));
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(16),
child: LinearProgressIndicator(
backgroundColor: Colors.red,
valueColor: ColorTween(begin: Colors.red, end: Colors.blue)
.animate(_animationController), // 從紅色變成藍色
value: _animationController.value,
),
),
],
),
);
}
}
複製程式碼