CircularProgressIndicator Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

What is CircularProgressIndicator Widget?

To indicate the waiting process in your application, it may be necessary to display a progress indicator. For that purpose, one of the suitable widgets is CircularProgressIndicator Widget. It displays the progress in a circular shape.

 LinearProgressIndicator Widget which is also used to display a  progress indicator. we have published a separate article for it.

Below is the constructor of CircularProgressIndicator.

CircularProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation valueColor,
this.strokeWidth = 4.0,
String semanticsLabel,
String semanticsValue,
})

Property : 

• Key key: The widget key, used to control if it’s should be replaced.
• double value: A value from 0.0 to 1.0 representing the completion progress (for determinate).
• Color backgroundColor: The background color of the widget.
• Animation<Color> valueColor: The progress indicator’s color as an animated value.
• double strokeWidth: The width of the line used to draw the circle. Defaults to 4.0.
• String semanticsLabel: ySemantics.label for the widgetyy.
• String semanticsValue: Semantics.value for the widget.

Before using it, you need to know that there are two types of progress indicators: determinate and indeterminate. Determinate means the completion progress is shown at every time. For example, if you download a file and you know the size of the file, you can use the size of the bytes already downloaded. If you can’t determine the completion progress or don’t want the user to know it, you can use indeterminate progress indicator.

To Make use of CircularProgressIndicator Widget Code Snippet will look like below :

  CircularProgressIndicator()

It will give us output like below :

CircularProgressIndicator Widget

Determinate CircularProgressIndicator Widget

For determinate progress indicator, you need to pass value property whose value ranges from 0.0 until 1.0. If the value is 0.0, it means the progress is 0%. If the value is 1.0, the progress is 100%. A value of 0.2 means the progress is at 20%, you can see it from the area covered by the progress indicator’s color.

For example, there is a variable _progress whose value meets the above rules. You only need to pass the variable as value when calling the constructor.

CircularProgressIndicator(
    value: _progress,
  )

Color: It’s also possible to set colors. For background colors, you need to set backgroundColor property. For the color of the progress indicator, what you need to set is valueColor. Code Snippet will look like below :

 CircularProgressIndicator(
    backgroundColor: Colors.cyanAccent,
    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
  )

circularprogressindicator Color

Stroke Width: The default width of the stroke is 4.0. You can set it using stroke Width property. Code Snippet will look like below :

 CircularProgressIndicator(
    strokeWidth: 10,
  )

CircularProgressIndicator strokeWidth

Complete Source code will look like below :

import 'dart:async';

import 'package:flutter/material.dart';

class CircularProgressIndicatorWidget extends StatefulWidget {
  @override
  _CircularProgressIndicatorState createState() =>
      _CircularProgressIndicatorState();
}

class _CircularProgressIndicatorState
    extends State<CircularProgressIndicatorWidget> {
  double _progress = 0;

  void startTimer() {
    new Timer.periodic(
      Duration(seconds: 1),
      (Timer timer) => setState(
        () {
          if (_progress == 1) {
            timer.cancel();
          } else {
            _progress += 0.2;
          }
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(),
            RaisedButton(
              child: Text('Start timer'),
              onPressed: () {
                setState(() {
                  _progress = 0;
                });
                startTimer();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Thanks for reading !!!

Do let us know your feedback.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.