如何使用Flutter创建多色进度条

Question

如何在Flutter中创建多色进度条。我阅读了有关LinearProgressIndicator的信息，但不确定它是否足够。

我想做这样的事情。

请指导我使用什么小部件。我不需要完整的代码。

Answer 1

您必须将其组装起来。我在您显示的进度栏中看到五个部分：

1. 具有阴影/深度效果，弯曲的角的灰色矩形
2. 带有白色文本的绿色矩形（阅读：带边框的容器）
3. 带有白色文本的琥珀色矩形
4. 带有白色文本的红色矩形
5. 所有矩形都是水平的（读取：行）

数字将随着您的活动的进行而变化。现在，可以使用setState（）实现此目的。因此，让我们不必担心。 ：）

[好，到目前为止，您需要准备一个带有一个参数的类，即progressPercentage。根据百分比确定要显示的块数以及带有哪些文本。 This简单代码段绘制带有一些文本的绿色矩形。