flutter如何实现progressbar进度条

在Flutter中如何实现一个自定义样式的进度条？我想实现一个带有圆角、渐变颜色和动画效果的进度条，但不太清楚该用什么组件或方法。LinearProgressIndicator的样式比较固定，不知道能否通过它来实现？或者是否有其他更灵活的方案？希望能提供一个完整的代码示例，谢谢！

2 回复

Flutter中实现进度条可使用LinearProgressIndicator或CircularProgressIndicator组件。
示例：

LinearProgressIndicator(value: 0.6) // 60%进度
CircularProgressIndicator() // 无限旋转

通过value属性控制进度（0~1），不设置则显示无限加载动画。

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


在Flutter中，实现进度条可以使用内置的 LinearProgressIndicator（线性进度条）或 CircularProgressIndicator（圆形进度条）。以下是具体实现方法：

1. 线性进度条

LinearProgressIndicator(
  value: 0.5, // 进度值（0.0~1.0），null 表示不确定进度
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

2. 圆形进度条

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

3. 动态进度示例

class ProgressExample extends StatefulWidget {
  @override
  _ProgressExampleState createState() => _ProgressExampleState();
}

class _ProgressExampleState extends State<ProgressExample> {
  double _progress = 0.0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LinearProgressIndicator(value: _progress),
        CircularProgressIndicator(value: _progress),
        ElevatedButton(
          onPressed: _updateProgress,
          child: Text('更新进度'),
        )
      ],
    );
  }
}

主要属性说明：

  • value：进度值（0.0~1.0），设为 null 显示无限循环动画
  • backgroundColor：背景颜色
  • valueColor：进度颜色，使用 AlwaysStoppedAnimation 固定颜色

这些组件都支持自定义颜色和样式，可直接用于展示加载状态或任务进度。

回到顶部