Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Types of Progress Indicators
2.1.
CircularProgressIndicator
2.2.
LinearProgressIndicator
2.3.
Indeterminate
2.4.
Determinate
2.5.
Example
2.6.
Explanation
3.
Frequently Asked Questions
3.1.
How do I change the color of my circular progress indicator in flutter?
3.2.
How do you hide the circular progress indicator in flutter?
3.3.
What is LinearProgressIndicator?
4.
Conclusion
Last Updated: Mar 27, 2024

Flutter Progress Bar- Linear and Circular

Author Sanjana Yadav
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

The Progress Indicator describes the time required to perform certain processes such as downloading, installation, uploading, file transfer, and so on. It essentially displays the length of processes by displaying the progress of a task or a period.

Types of Progress Indicators

There are two ways to show progress in Flutter

CircularProgressIndicator

A CircularProgressIndicator is a widget that displays the progress as a circle. It's a spinning circular progress bar that shows whether the application is busy or on hold.

LinearProgressIndicator

A LinearProgressIndicator, often known as a progress bar, is a widget that displays progress linearly or down the line to demonstrate that the program is running.

There are two types of progress indicators

Indeterminate

The indeterminate progress indicator is essentially an indication that does not have a precise value at any point in time and indicates that the process is being carried out without specifying how much progress is yet to be done. We set the value attribute to null to make an indefinite progress bar.

Determinate

A determinate progress indicator is essentially an indicator with a specified value at each time or instance and indicates how much progress is made. The number here rises in steps from 0 to 1, with 0 indicating that progress is just beginning and 1 indicating that progress has been accomplished.

Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Loader(),
    );
  }
}

class Loader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Progress Bar'),
        backgroundColor: Color(0xFF5BA98F),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(
              height: 15,
            ),
            LinearProgressIndicator(),
          ],
        ),
      ),
    );
  }
}

Output

Now let's look at the fundamental properties of a progress bar.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Loader(),
    );
  }
}

class Loader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Progress Bar'),
        backgroundColor: Color(0xFF5BA98F),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(
              backgroundColor: Colors.amberAccent,
              valueColor: AlwaysStoppedAnimation(Colors.teal),
              strokeWidth: 10,
            ),
            SizedBox(
              height: 15,
            ),
            LinearProgressIndicator(
              backgroundColor: Colors.amberAccent,
              valueColor: AlwaysStoppedAnimation(Colors.teal),
              minHeight: 20,
            )
          ],
        ),
      ),
    );
  }
}

Output

Explanation

The following is an explanation of the above code for using Progress Indicators in Flutter:

backgroundColor: In the progress bar, this property is used to specify the background color of a linear loader and a circular spin loader.

strokeWidth: The width of the line used to form a circle in a CircularProgressIndicator is specified by this attribute.

minHeight: The minimum height of the line used to draw the indicator in a LinearProgressIndicator, or in other words, the thickness of the line in an indicator.

valueColor: is used to specify the value of the progress indicator as an animated value. The highlights of the finished work are covered by the valueColour attribute.

AlwaysStoppedAnimation:  It's used to express a consistent color in a value using the valueColor attribute.

value: The value attribute distinguishes between a determinate and an indeterminate progress bar. If the value attribute is set to null, the progress indicator will be indeterminate, which means it will display the specified animation on the indicator with its motion but no indication of how much progress has been made. If it's set to non-null, it'll show how far you've come at any given time. A number of 0.0 indicates that progress has just begun, while 1.0 indicates that it has been finished.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

How do I change the color of my circular progress indicator in flutter?

Step 1: Find the CircularProgressIndicator whose color you'd like to modify.

Step 2: Include the valueColor property in your code.

Step 3: Assign the AlwaysStoppedAnimation() method to the object. 

Step 4: Add the color of your choice to the AlwaysStoppedAnimation() method.

How do you hide the circular progress indicator in flutter?

Wrap CircularProgressIndicator in a UniversalWidget (pub.dartlang.org/packages/universal widget), place it in your root screen, name it, and then call to display or hide it by calling UniversalWidget. find("name").update(visible: true)or (visible: false)

What is LinearProgressIndicator?

For visibility changes, a LinearProgressIndicator with a 4dp indicator/track thickness is used without animation. The primaryColor will be used as the indicator color if it is not customized; the track will be the (first) indicator color when disabledAlpha is applied.

Conclusion

In this article, we have extensively discussed the Flutter Snackbar. We learned what a snackbar is, its properties and how to create a SnackBar in Flutter. 

We hope that this blog has helped you enhance your knowledge of the flutter framework and if you would like to learn more about flutter, check out our articles at Flutter

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and AlgorithmsCompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc., you must look at the problemsinterview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!

Previous article
Flutter Toast in Flutter
Next article
Flutter Snackbar
Live masterclass