flutter如何实现进度指示器

在Flutter中如何实现一个自定义的进度指示器？我想实现一个类似圆形进度条的效果，可以显示当前进度百分比，并且能够自定义颜色和大小。官方提供的CircularProgressIndicator只能显示无限加载动画，不知道如何实现带有具体进度的效果？求具体代码示例和实现思路。

2 回复

Flutter中可使用CircularProgressIndicator或LinearProgressIndicator实现进度指示器。通过value属性控制进度（0~1），无value则为无限循环动画。也可自定义颜色、尺寸等样式。

更多关于flutter如何实现进度指示器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下方式实现进度指示器：

1. 线性进度指示器

LinearProgressIndicator(
  value: 0.7, // 进度值 0.0-1.0
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

2. 圆形进度指示器

CircularProgressIndicator(
  value: 0.6,
  strokeWidth: 4.0,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
)

3. 不确定进度（加载中）

// 线性
LinearProgressIndicator()

// 圆形  
CircularProgressIndicator()

4. 自定义进度指示器示例

Column(
  children: [
    LinearProgressIndicator(value: _progress),
    SizedBox(height: 20),
    CircularProgressIndicator(value: _progress),
    SizedBox(height: 20),
    Text('${(_progress * 100).toStringAsFixed(1)}%'),
  ],
)

5. 结合状态管理

double _progress = 0.0;

void _updateProgress() {
  setState(() {
    _progress += 0.1;
    if (_progress > 1.0) _progress = 0.0;
  });
}

主要使用 LinearProgressIndicator 和 CircularProgressIndicator 组件，通过 value 属性控制进度，不设置 value 则为不确定状态的加载指示器。

回到顶部