close

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 to 1, where 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.

How to use Flutter CircularProgressIndicator Widget ?

To Make use of CircularProgressIndicator Widget you just have to define CircularProgressIndicator() As Shown below. Just Follow below tutorial.

How to set Size to CircularProgressIndicator ?

By Simply Placing the CircularProgressIndicator in SizedBox Or Container And then Wrapping with Center will solve your queries.

How to Work With Progress Indicator in flutter ?

To work with progress indicator in flutter you just have to define CircularProgressIndicator() in your center of your screen and use its property. just checkout our tutorial to understand use of all properties.

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

It will give us output as shown below :

Flutter CircularProgressIndicator Widget, circularprogressindicator widget, progress indicator in flutter, circularprogressindicator in flutter, flutter circularprogressindicator

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 :

Flutter CircularProgressIndicator Widget, circularprogressindicator widget, progress indicator in flutter, circularprogressindicator in flutter, flutter circularprogressindicator

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 :

Flutter CircularProgressIndicator Widget, circularprogressindicator widget, progress indicator in flutter, circularprogressindicator in flutter, flutter circularprogressindicator

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 :

Flutter CircularProgressIndicator Widget, circularprogressindicator widget, progress indicator in flutter, circularprogressindicator in flutter, flutter circularprogressindicator

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

Leave a Comment

%d bloggers like this: