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

Question

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

我想做这样的事情。

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

Answer 1

您必须逐个组装它。 我在您显示的进度栏中看到五个部分：

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

随着您的活动进行，这些数字会发生变化。 现在，这可以通过 setState() 来实现。 所以，让我们不要担心。 :)

好的，就目前而言，您需要准备一个 class ，它采用一个参数，即progressPercentage 。 根据百分比，您可以决定显示多少块以及使用什么文本。 这个简单的代码片段绘制了带有一些文本的绿色矩形。 这个codepen显示了多色条，它可能很容易转换成进度条。