Flutter CircularProgressIndicator Widget

Hello Guys, How are you all? Hope You all Are Super Fine. Today I am coming with CircularProgressIndicator Widget Tutorial In This Tutorial, I am Sharing All Of About CircularProgressIndicator Widget. Here I am sharing with you how to create determinate and indeterminate CircularProgressIndicator in Flutter. Without Wasting Your Time Let’s Start This Tutorial.

Do You want to show your users that your app is making a process Or Working on something? We have a flutter widget named CircularProgressIndicator widget For that. CircularProgressIndicator indicates the waiting process in your application, it will display a progress indicator.

There Are Two types of Progress Indicators: determinate and indeterminate

1. Indeterminate: Indeterminate progress indicators do not have a specific value at each point in time and instead indicate that progress is being made without indicating how much progress remains. To create an indeterminate progress indicator, use a null value.

2. determinate: Determinate progress indicator is basically an indicator that does have a specific value at each time or an instance and it does indicate how much progress is completed. The value here increases monotonically from 0 to 1, where 0 indicates that progress is just started and 1 indicates that the progress is completed. 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

How to Use Flutter CircularProgressIndicator Widget?

Here Is Flutter CircularProgressIndicator Widget Guide.

Make use of CircularProgressIndicator Widget You just have to define CircularProgressIndicator() as shown below.

It will give us output as shown below :

Properties:

• Key key : Controls how one widget replaces another widget in the tree.
• Color backgroundColor : The progress indicator’s background-color
• double strokeWidth : The width of the line used to draw the circle.
• double value: If non-null, the value of this progress indicator
• Color valueColor: The progress indicator’s color as an animated value.

Usage Of backgroundColor And valueColor Property in CircularProgressIndicator

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

It will give us output as shown below :

Usage Of strokeWidth Property in CircularProgressIndicator

You can set strokeWidth as you needed.

  child: CircularProgressIndicator(
            strokeWidth: 10,
   ),

It will give us output as shown below :

Usage Of value Property in CircularProgressIndicator

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CircularProgressIndicator - FlutterCorner',
      home: FlutterExample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class FlutterExample extends StatefulWidget {
  FlutterExample({Key key}) : super(key: key);

  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  double _downloadProgress = 0;
  void startTimer() {
    new Timer.periodic(
      Duration(seconds: 1),
      (Timer timer) => setState(
        () {
          if (_downloadProgress == 1) {
            timer.cancel();
          } else {
            _downloadProgress += 0.05;
          }
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CircularProgressIndicator - FlutterCorner'),
      ),
      body: Center(
        child: Container(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(
              value: _downloadProgress,
              strokeWidth: 5,
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
            ),
            SizedBox(
              height: 20,
            ),
            RaisedButton(
              child: Text('Start Process'),
              onPressed: () {
                setState(() {
                  _downloadProgress = 0;
                });
                startTimer();
              },
            ),
          ],
        )),
      ),
    );
  }
}

It will give us output as shown below :

Thanks for reading !!!

Summery

it’s all About All possible Methods. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below your suggestion.

Check Out Below Article

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• How to Dynamically Disable and Enable Button in Flutter?
• set Background Image to Scaffold in Flutter.
• How To Select multiple images with Flutter
• How to Set Network Image In Circular Avatar In Flutter?