Flutter - Using CircularProgressIndicator Examples

This tutorial shows you how to create determinate and indeterminate CircularProgressIndicator in Flutter.

To indicate waiting process in your application, it may be necessary to display a progress indicator. For that purpose, one of the suitable widget is CircularProgressIndicator. It displays the progress in a circular shape. Below I'm going to show you how to use the widget. Another alternative of this widget is LinearProgressIndicator, which displays the progress in a linear bar.

Creating CircularProgressIndicator

Below is the constructor of CircularProgressIndicator.

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

Before using it, you need to know that there are two types of progress indicator: 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.

Creating Indeterminate CircularProgressIndicator

The basic usage is very simple, you don't need to pass anything in the constructor.

  CircularProgressIndicator()

Output:

 

Creating Determinate CircularProgressIndicator

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% (the circle is fully covered by the color of the progress indicator.). 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,
  )

Output:

 

Customizing Color

It's also possible to set colors. For background colors, you need to set backgroundColor (Color) property. For the color of the progress indicator, what you need to set is valueColor (Animation<Color>)

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

Output:

 

Setting Stroke Width

The default width of the stroke is 4.0. You can set it using strokeWidth property.

  CircularProgressIndicator(
    strokeWidth: 10,
  )

Output:

 

Full Code

Below is a full code example that uses determinate CircularProgressIndicator along with customized background, indicator colors, and stroke width.

  import 'dart:async';
  
  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Tutorial by Woolha.com',
        home: _CircularProgressIndicatorApp(),
      );
    }
  }
  
  class _CircularProgressIndicatorApp extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
      return _CircularProgressIndicatorAppState();
    }
  }
  
  class _CircularProgressIndicatorAppState
      extends State<_CircularProgressIndicatorApp> {
    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 Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircularProgressIndicator(
                  strokeWidth: 10,
                  backgroundColor: Colors.cyanAccent,
                  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                  value: _progress,
                ),
                RaisedButton(
                  child: Text('Start timer'),
                  onPressed: () {
                    setState(() {
                      _progress = 0;
                    });
                    startTimer();
                  },
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

Output:

 

CircularProgressIndicator Properties

Below is the list of available properties you can pass as the constructor parameters.

• 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.