如何创建两级循环进度指示器？

Question

以下是我想要实现的

我正在查看 Circular Percent Indicator 库，但它不提供此功能

以下是在原生Android开发https://github.com/grmaciel/two-level-circular-progress-bar中实现的

但是如何将它移植到 Flutter？

Answer 1

您可以通过使用stack小部件来实现此效果，它将允许您将两个指标放置在相同的位置，从而获得重叠完成的效果：

Stack(
  children: <Widget>[
    CircularProgressIndicator(
      value: 0.8,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.purple),
    ),
    CircularProgressIndicator(
      value: 0.6,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
    ),
  ]
);

Answer 2

试试这个， percent_indicator库，

        new CircularPercentIndicator(
                radius: 130.0,
                animation: true,
                animationDuration: 1200,
                lineWidth: 15.0,
                percent: 0.4,
                center: Center(
                       child: Icon(Icons.location_on),
                        ),
                circularStrokeCap: CircularStrokeCap.butt,
                backgroundColor: Colors.deepPurple,
                progressColor: Colors.green,
              ),