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

Question

以下是我要实现的目标

我正在查看“循环百分比指标”库，但是该库不提供此功能

以下是在本机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,
              ),