ProgressIndicator in Flutter

Last Updated : 20 Jul, 2020

Flutter CircularProgressIndicator is a material widget that indicates that the application is busy. Firstly, we create a new project using Visual Studio Code(IDE) with the name “progressindicator”. You can choose any name.

Steps:

1. Invoke View > Command Palette.

2. Type “flutter”, and select the Flutter: New Project.

3. Enter a project name and press Enter.

4. Create the parent directory for the new project folder.

ProgressIndicator in Flutter

Update plugin progress_dialog: ^1.2.0 in pubspec.yaml directory should look something like below

name: progressindicator
description: A new Flutter project.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString 
# while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General
        /Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  progress_dialog: ^1.2.0

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Now update the progress dialog flutter package.

Create a file with name main.dart like below :

Dart

import 'package:flutter/material.dart'; 
import 'package:progress_dialog/progress_dialog.dart'; 
   
ProgressDialog pr; 
   
void main() { 
  runApp(MaterialApp( 
    home: FirstScreen(), 
  )); 
} 
   
class FirstScreen extends StatefulWidget { 
  @override 
  _FirstScreenState createState() => _FirstScreenState(); 
} 
   
class _FirstScreenState extends State { 
  ProgressDialog pr; 
   
  @override 
  // Add the CSS details of the page 
  Widget build(BuildContext context) { 
    pr = new ProgressDialog(context); 
    pr.style( 
          message: 'processing', 
          borderRadius: 8.0, 
          backgroundColor: Colors.white, 
          progressWidget: CircularProgressIndicator(), 
          elevation: 8.0, 
          insetAnimCurve: Curves.easeInOut, 
          progress: 0.0, 
          maxProgress: 100.0, 
          progressTextStyle: TextStyle( 
            color: Colors.white, fontSize: 13.0, 
            fontWeight: FontWeight.w400), 
          messageTextStyle: TextStyle( 
            color: Colors.white, fontSize: 19.0, 
            fontWeight: FontWeight.w600) 
        ); 
   
    return Scaffold( 
      appBar: AppBar( 
        // Define the design 
          title: const Text('GeeksForGeeks'), 
          backgroundColor: Colors.green,), 
      body: Center( 
          
        child: RaisedButton( 
          child: Text('Click here..', 
              style: TextStyle(color: Colors.white)), 
          color: Colors.green, 
          onPressed: () { 
            pr.show(); 
            Future.delayed(Duration(seconds: 2)).then((value) { 
              pr.hide().whenComplete(() { 
                Navigator.of(context).push(MaterialPageRoute( 
                    builder:  
                  (BuildContext context) => SecondScreen())); 
              }); 
            }); 
          }, 
        ), 
      ), 
    ); 
  } 
} 
   
class SecondScreen extends StatefulWidget { 
  @override 
  _SecondScreenState createState() => _SecondScreenState(); 
} 
   
class _SecondScreenState extends State { 
  @override 
  // Define the child  
  Widget build(BuildContext context) { 
    return Scaffold( 
      body: Center( 
        child: RaisedButton( 
          onPressed: () => Navigator.of(context).pop(), 
          child: Text('Back', 
              style: TextStyle(color: Colors.white)), 
          color: Colors.green, 
        ), 
      ), 
    ); 
  } 
} 

Output :

Complete code is available on github.com/progressIndicator

My Personal Notes

Related Articles

Steps:

Create a file with name main.dart like below :

Dart