如何在Flutter中为CircularProgressIndicator添加圆角边框？

Question

我想按照上图实现进度指示器的角点。

Answer 1

向 LinearProgressIndicator 添加圆角边框可以轻松完成，但这与 CircularProgressIndicator 不同，因为 flutter 库中尚未提供支持。

这个问题已经在这里提出，flutter团队给出的解决方案是这里。

因此，我们可以为这个问题提供一个干净的自定义解决方案，即只需将 ..StrokeCap = StrokeCap.round 添加到默认的 CircularProgressIndicator 类。

将类 CircularProgressIndicator 和 ProgressIndicator 的源代码复制到代码存储库中的单独文件中，并根据您在 _CircularProgressIndicatorPainter 中的要求添加行程Cap 值。

就这样吧。您已获得上图中预期的指示器。

Answer 2

有一些软件包，但如果您想手动执行此操作，请查看此drive-link。我是手动做的。您可以根据需要更改它。

Answer 3

您可以使用这个 curved_progress_bar 包。或者，如果您想手动设计它，那么您可以在此处查看包的源代码curved_progress_bar - GitHub

Answer 4

自 Flutter 3.13 起，这可以通过 strokeCap

 小部件中包含的 

CircularProgressIndicator

 属性

来完成：

CircularProgressIndicator(
    strokeCap: StrokeCap.round,
);