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

Question

4

我希望实现如上所示进度指示器的圆角效果。

- Mahendra Raj

我在 pub.dev 上找到了这个包，看看这个链接 https://pub.dev/packages/percent_indicator - targiasld

3个回答

2

虽然有一些软件包可供使用，但如果您想手动完成，请查看此驱动器链接。我手动完成了此操作。您可以根据需要进行更改。[这里]

- JB Jason

我猜用“are”、“you”这样的词真的很难，所以你得用像“r”、“u”这样的快捷方式…… - undefined

0

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

- L Uttama

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mahendra Raj · Accepted Answer

将圆角边框添加到LinearProgressIndicator非常容易，但对于CircularProgressIndicator来说并不是这样，因为Flutter库中尚未提供支持。

有人在这里提出了这个问题，Flutter团队给出的解决方案在这里。

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

将CircularProgressIndicator和ProgressIndicator类的源代码复制到单独的文件中，并根据需要在_CircularProgressIndicatorPainter中添加strokeCap值。

你就完成了。你现在拥有了与上面图片中预期的指示器相同的指示器。