Material 组件库中提供了两种进度指示器：LinearProgressIndicator和CircularProgressIndicator，它们都可以同时用于精确的进度指示和模糊的进度指示。精确进度通常用于任务进度可以计算和预估的情况，比如文件下载；而模糊进度则用户任务进度无法准确获得的情况，如下拉刷新，数据提交等

6.1 LinearProgressIndicator

LinearProgressIndicator是一个线性、条状的进度条，定义如下：

LinearProgressIndicator 相关属性参数

value：value表示当前的进度，取值范围为[0,1]；如果value为null时则指示器会执行一个循环动画（模糊进度）；当value不为null时，指示器为一个具体进度的进度条。
backgroundColor：指示器的背景色。
valueColor: 指示器的进度条颜色；值得注意的是，该值类型是Animation<Color>，这允许我们对进度条的颜色也可以指定动画。如果我们不需要对进度条颜色执行动画，换言之，我们想对进度条应用一种固定的颜色，此时我们可以通过AlwaysStoppedAnimation来指定

 Column(
          children: const [
            LinearProgressIndicator(
              valueColor: AlwaysStoppedAnimation(Colors.blue),
            ),
            SizedBox(height:20.0),
            LinearProgressIndicator(
              value: 0.8,
              backgroundColor: Colors.red,
              valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
            ),
          ],
        ),

效果图

第一个进度条在执行循环动画：蓝色条一直在移动，而第二个进度条是静止的，停在80%的位置

6.2 CircularProgressIndicator

CircularProgressIndicator是一个圆形进度条，定义如下：

CircularProgressIndicator相关参数

相关代码：

CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation(Colors.blue),
            ),
            SizedBox(height: 10.0),
            CircularProgressIndicator(
              value: 0.9,
              valueColor: AlwaysStoppedAnimation(Colors.blue),
            ),

CircularProgressIndicator效果

第一个进度条会执行旋转动画，而第二个进度条是静止的，它停在90%的位置。

6.2 自定义尺寸

我们可以发现LinearProgressIndicator和CircularProgressIndicator，并没有提供设置圆形进度条尺寸的参数；如果我们希望LinearProgressIndicator的线细一些，或者希望CircularProgressIndicator的圆大一些该怎么做？
其实LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。知道了这点，我们便可以通过尺寸限制类Widget，如ConstrainedBox、SizedBox （我们将在后面容器类组件一章中介绍）来指定尺寸，代码如下：

SizedBox(
              height: 10,
              child: LinearProgressIndicator(
              ),
            ),
            SizedBox(height: 20.0),
            SizedBox(
              height: 100,
              width: 100,
              child: CircularProgressIndicator(),
            )

自定义尺寸效果

注意，如果CircularProgressIndicator显示空间的宽高不同，则会显示为椭圆。如

 SizedBox(
              height: 100,
              width: 150,
              child: CircularProgressIndicator(
                backgroundColor: Colors.grey,
              ),
            )

宽高不同，显示椭圆

6.3 进度色动画

前面说过可以通过valueColor对进度条颜色做动画，关于动画我们将在后面专门的章节详细介绍，这里先给出一个例子，读者在了解了Flutter动画一章后再回过头来看。我们实现一个进度条在3秒内从灰色变成蓝色的动画，代码如下

进度条动画代码如下

效果图：

进度条动画一

3s后由灰色变成男色

原型进度条动画1

3S后由灰色变成蓝色