如何創建兩級循環進度指示器？

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,
              ),