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

Question

I am trying to figure out how to curve a fractionally sized box inside a container in flutter.

The code I currently have just creates a giant circle inside the border.

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

Here is what I am trying to achieve (but with the green bar only showing 20% instead of the 100% shown here):

Answer 1

Why don't you use CircularProgressIndicator widget and a Text widget in a stack?

You can set strokeWidth and the progress of a circularProgressIndicator like this:

CircularProgressIndicator(
            value: yourProgress,
            strokeWidth: yourStrokeWidth)