CODEWITHSUNDEEP
flutterflutter-layout
Steven J Reeves
Steven J Reeves

Reputation: 101

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

Upvotes: 1

Views: 3185

Answers (1)

Milvintsiss
Milvintsiss

Reputation: 1448

You can use the dedicated CircularProgressIndicator widget. And superpose a Text widget to it with a stack.

Here an example:

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

And a full example in DartPad.

Upvotes: 2

Related Questions