如何在flutter中创建圆形进度条

Question

我正在尝试弄清楚如何在颤动的容器内弯曲一个小尺寸的盒子。

我目前的代码只是在边框内创建了一个巨大的圆圈。

      decoration: BoxDecoration(border: Border.all(),
       shape: BoxShape.circle),
       width: 112,
       height: 112,
       child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
         Flexible(
          child: FractionallySizedBox(
          widthFactor:.90,                
          child: Container(
          decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.green,),),

这是我想要实现的目标（但绿色条仅显示 20%，而不是此处显示的 100%）：

Answer 1

您可以使用专用的 CircularProgressIndicator 小部件。并用堆栈将文本小部件叠加到它上面。

这里有一个例子：

Stack(
  alignment: Alignment.center,
  children: [
    SizedBox.square(
      dimension: 112,
      child: CircularProgressIndicator(
        value: [progressValue],
        color: Colors.green,
        strokeWidth: 24.0,
      ),
    ),
    Text(
      '${[progressValue]}%',
      style: const TextStyle(
        fontSize: 28.0,
        fontWeight: FontWeight.bold,
        color: Colors.black,
      ),
    ),
  ],
),

以及 DartPad 中的完整示例。