Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
323 views
in Technique[技术] by (71.8m points)

How to create a circular progress bar in flutter

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

Circle Chart

question from:https://stackoverflow.com/questions/66051908/how-to-create-a-circular-progress-bar-in-flutter

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...