简体   繁体   English

如何在 flutter 中创建如下图所示的圆形进度条

[英]How to create circular progress bar like below image in flutter

在此处输入图像描述

I want to create this circular progress bar with animation and working on percentage我想用 animation 创建这个循环进度条并处理百分比

You can either achieve this using CustomPaint to draw it yourself (recommended), or perhaps using a Stack to put 3 different-sized CircularProgressIndicator s on top of each other.您可以使用CustomPaint自己绘制(推荐)来实现此目的,或者使用Stack将 3 个不同大小的CircularProgressIndicator相互叠加。

It's not difficult to custom paint this: for each ring, you can first draw a grey circle as the background, then draw a colored arc path.自定义绘制这个并不难:对于每个环,您可以先绘制一个灰色圆圈作为背景,然后绘制一条彩色圆弧路径。 You can round the ends by setting Paint()..strokeCap = StrokeCap.round .您可以通过设置Paint()..strokeCap = StrokeCap.round来使末端变圆。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM