flutter - 如何添加线性百分比指标

Question

我想创建一个线性百分比指示器，我可以
像这样在文本小部件中显示它的百分比

我找到了一个类似它的名字的库，percent_indicator 但它没有我想要实现的东西。
是否有任何看起来更像这样的包？

标签： flutterdart

Answer 1

使用 Flutter 的LinearProgressIndicator作为主要部分，但如果您想要特殊背景，则可能需要创建自定义小部件。图像可以通过使用Column来实现。列的顶部会有一个Row。然后，使用行中的文本小部件和对齐小部件将其对齐到右、左和中心。

或者不使用flutter的LinearProgressIndicator，而是创建一个带有堆栈的自定义有状态小部件，并且它是一个蓝色容器，该容器在不调整大小的灰色容器上调整大小。

使用 BoxShadow 创建阴影。