在 Flutter 中，我们经常使用 CircularProgressIndicator 来展示加载进度。但是你是否注意到：它的进度端始终是“平头”的（直角）？

这在一些 UI 设计中并不美观，特别是想实现类似 Apple 健身环那样“前端圆清澈”效果时，就需要一个带圆角的圆形进度条。

---

🛠 方法一：使用 CustomPaint 自绘圆角进度

Flutter 的 Canvas 提供了绘制弧形和给进度端点设置样式的能力，我们只需设置 Paint.strokeCap = StrokeCap.round 就可以让进度端头变成圆角。

→ 实现代码：

class RoundedCircularProgressIndicator extends StatelessWidget {final double progress;final double size;final double strokeWidth;final Color backgroundColor;final Color progressColor;const RoundedCircularProgressIndicator({super.key,required this.progress,this.size = 40.0,this.strokeWidth = 6.0,this.backgroundColor = const Color(0xFFE0E0E0),this.progressColor = Colors.blue,});@overrideWidget build(BuildContext context) {return SizedBox(width: size,height: size,child: CustomPaint(painter: _RoundedCircularProgressPainter(progress: progress,strokeWidth: strokeWidth,backgroundColor: backgroundColor,progressColor: progressColor,),),);}
}class _RoundedCircularProgressPainter extends CustomPainter {final double progress;final double strokeWidth;final Color backgroundColor;final Color progressColor;_RoundedCircularProgressPainter({required this.progress,required this.strokeWidth,required this.backgroundColor,required this.progressColor,});@overridevoid paint(Canvas canvas, Size size) {final center = size.center(Offset.zero);final radius = (size.width - strokeWidth) / 2;final rect = Rect.fromCircle(center: center, radius: radius);final backgroundPaint = Paint()..color = backgroundColor..style = PaintingStyle.stroke..strokeWidth = strokeWidth;final progressPaint = Paint()..color = progressColor..style = PaintingStyle.stroke..strokeWidth = strokeWidth..strokeCap = StrokeCap.round; // 圆角关键canvas.drawArc(rect, 0, 2 * pi, false, backgroundPaint);canvas.drawArc(rect, -pi / 2, 2 * pi * progress, false, progressPaint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

---

→ 使用示例：

RoundedCircularProgressIndicator(progress: 0.75,size: 80,strokeWidth: 10,backgroundColor: Colors.grey.shade300,progressColor: Colors.green,
),

效果：圆角端头，进度从顶部开始顺时针绘制，大气现代。

---

📆 方法二：使用第三方库 percent_indicator

percent_indicator 是非常流行的进度指示器库，支持 circularStrokeCap: CircularStrokeCap.round

安装依赖

dependencies:percent_indicator: ^4.2.5

使用示例

CircularPercentIndicator(radius: 40.0,lineWidth: 8.0,percent: 0.6,circularStrokeCap: CircularStrokeCap.round,backgroundColor: Colors.grey.shade300,progressColor: Colors.purple,
),

很方便，适合快速开发场景。

---

❌ Flutter 自带的 CircularProgressIndicator 存在的限制

Flutter 默认的 CircularProgressIndicator 没有揭露 strokeCap 设置，不支持圆角端。

如果你想要实现“前端圆角”效果，当前只能选择:

1. 自绘
2. 第三方库

---

📊 方法对比

方法	是否支持圆角	自定义能力	使用难度	推荐度
CustomPaint 自绘	✅	高	中	⭐⭐⭐⭐
percent_indicator	✅	中	低	⭐⭐⭐⭐
CircularProgressIndicator	❌	低	低	⭐⭐

---

✅ 总结

本文介绍了如何在 Flutter 中实现 带圆角的圆形进度条，通过：

• 自绘 CustomPaint
• 第三方库 percent_indicator

这些技巧可以使进度 UI 更加精致，满足更复杂的产品设计需求。

---

🐾 后记

如果你正在开发带上传进度、音频处理、视频模块等场景，圆角进度条会大大提升用户体验。

欢迎点赞、收藏、评论！有任何 Flutter 相关问题也可以留言一起探讨！