Flutter Circular & Linear Progress Indicators (original) (raw)

Last Updated : 28 Feb, 2025

Progress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes.

In Flutter, progress can be displayed in two ways:

  1. **CircularProgressIndicator: A _CircularProgressIndicator is a widget that shows progress along a circle. It is a circular progress bar that spins to indicate that the application is busy or on hold.
  2. **LinearProgressIndicator: A _LinearProgressIndicator also known as a progress bar and it is a widget that shows progress in a linear direction or along a line to indicate that the application is in progress.

There are two types of progress indicators:

  1. **Indeterminate: Indeterminate progress indicator is an indicator that does not display a specific value at any instance of time and only indicates that progress is being made. It does not indicate how much progress remains to be made. For creating an indeterminate progress bar we set the value property as null.
  2. **Determinate: Determinate progress indicator is an indicator that has a specific value at each instance of time. It also indicates how much progress is completed. The value in the determinate progress indicator increases monotonically from 0 to 1, where 0 indicates that progress is just started and 1 indicates that the progress is completed.

**Implement the Progress Indicators in the Flutter Application

**Step 1: Import required packages

Import the material.dart package in order to display Flutter Progress Indicator widget implementing Material Design.

import 'package:flutter/material.dart';

**Step 2: Next, implement the below code in the respective main.dart file

**main.dart:

Dart `

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('GeeksforGeeks'), backgroundColor: Color(0xFF4CAF50), foregroundColor: Colors.white, centerTitle: true, ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator(), SizedBox( height: 15, ), LinearProgressIndicator(), ], ), ), ); } }

`

**Output:

**Step 3: Improve the user interface.

Now in order to improve the user interface of this application we need to implement some significant properties of the progress bar.

**main.dart:

Dart `

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('GeeksforGeeks'), backgroundColor: Color(0xFF4CAF50), foregroundColor: Colors.white, centerTitle: true, ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator( backgroundColor: Colors.redAccent, valueColor: AlwaysStoppedAnimation(Colors.green), strokeWidth: 10, ), SizedBox( height: 15, ), LinearProgressIndicator( backgroundColor: Colors.redAccent, valueColor: AlwaysStoppedAnimation(Colors.green), minHeight: 20, ) ], ), ), ); } }

`

**Output:

**Explanation of the above Application:

Following is the explanation of above-mentioned code for implementing Progress Indicators in Flutter: