Flutter Circular Progress Indicator – Modal Progress HUD Flutter Library

Hi  Guys, Welcome to Proto Coders Point , In this Tutorial is all about a flutter Widget Library known as Modal Progress HUD, By the use of this library we can show a Circular Progress Indicator in our flutter Applications.

Demo on Progress Indicator

Modal Progress hud

In flutter progress indicator is an simple widget that is been wrap into other flutter widgets to enable modal progress indicator.

Here HUD stands for Heads Up Display.

let’s go straight into implementation of Flutter Circular Progress Indicator

Installation of Modal Progress HUD in our Flutter Project

To user this Package as a library

You need to add the required package’s dependencies into pubspec.yaml file

dependencies: 
  modal_progress_hud: ^0.1.3

Then, just click on Package Get

The above library of flutter circular progress indicator dependencies library version may update so to get latest version visit official site here.

Now you can use them by importing wherever required.

Importing the flutter progress indicator package wherever required

Now in your Dart code (main.dart), you can use:

import 'package:modal_progress_hud/modal_progress_hud.dart';

After importing the library in the required flutter page (main.dart)

Now, all you have to do is simply wrap your widget as a child of ModalProgressHUD, typically a form, together with a boolean that is maintained in local state.

Snippet Example Code

class _MyHomePage2State extends State<MyHomePage2> {
   bool show=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Progress Indicator Example"),
      ),
      body: ModalProgressHUD(
        inAsyncCall: show, // here show is bool value, which is used to when to show the progess indicator
        child: Column(
          children: <Widget>[
            Text(" Modal Progress Indicator ")
          ],
        ),
      ),
    );
  }
}

inAsyncCall : Accepts boolean type value, by setting this to true we can show the progress indicator in our flutter application.

The current parameters are customizable in the constructor

ModalProgressHUD(
  @required inAsyncCall: bool,
  @required child: Widget,
  opacity: double,
  color: Color,
  progressIndicator: CircularProgressIndicator,
  offset: double
  dismissible: bool,
);

Flutter Circular Progress Indicator  example with Source Code

main.dart

Copy Paste the below code in main.dart file to make it work.

import 'package:flutter/material.dart';
import 'package:modal_progress_hud/modal_progress_hud.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showProgressloading = false; // set to false
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Modal Progress HUD Example"),
      ),
      body: ModalProgressHUD(
        inAsyncCall: showProgressloading, // is set to false, so then login button is pressed it gets activated.
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Center(
                child: Text(
                  "Log-In",
                  style: TextStyle(
                      fontSize: 25,
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w800),
                ),
              ),
              SizedBox(
                height: 48.0,
              ),
              TextField(
                keyboardType: TextInputType.emailAddress,
                showCursor: true,
                decoration: InputDecoration(hintText: "Enter your Email"),
                onChanged: (value) {},
              ),
              SizedBox(
                height: 15.0,
              ),
              TextField(
                obscureText: true,
                showCursor: true,
                decoration: InputDecoration(hintText: "Enter your password"),
                onChanged: (value) {},
              ),
              SizedBox(
                height: 15.0,
              ),
              MaterialButton(
                elevation: 5.0,
                color: Colors.blueAccent,
                child: Text(
                  "Log-In",
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  print("Button Clicked");

                  setState(() {
                    showProgressloading = true; // then login button is pressed the circular flutter indicator will get active
                  });
                  // stop the Progress indicator after 5 seconds
                  new Future.delayed(const Duration(seconds: 5), () {
                    setState(() => showProgressloading = false);
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

So the Source code will show a simple Login screen.

It have 2 TextField and a Button.

When the user press the login button the Flutter Circular progress indicator will be show.

1. On initial load, showProgressloading is false which causes your child widget to display
2. When Login button is pressed, showProgressloading is set to true, and will display the modal progress.
3. Then once Futur Delayed is Completed,showProgressloading is set back to false, This will hide the progress Indicator.

and here i m making user of Future.delayed to show the progress indicator for 5 seconds.

you can just copy paste the above lines of code into your project.