How to show Progress Indicator for Async tasks in Flutter

Today, we will be learning how to show the Progress Indicator while async tasks are performed in Flutter. Many times we require the progress indicator widget to show the user that a task is being performed, this makes sure the user does not get confused in cases when the app does not respond quickly. For example, when the user clicks on the sign-in button, it usually takes some time for the server to respond to the request. So, we will be primarily using two types of approaches to implement the progress indicator. One would be to use a Modal to show the indicator and other would be to use Snackbar.

First we will see how to use the Modal to implement progress indicator:-

void whileLoading() {
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return Dialog(
        child: new Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            new CircularProgressIndicator(),
            new Text("Loading"),
          ],
        ),
      );
    },
  );
    Navigator.pop(context); //pop dialog
    goToHomepage();
 }

Here we will show the loading dialogue till the user is successfully logged in.

Another way to use the indicator is in Snackbar like this:-

onPressed: () {
               scaffoldKey.currentState.showSnackBar(
               new SnackBar(duration: new Duration(seconds: 5), content:
               new Row(
                        children: <Widget>[
                          new CircularProgressIndicator(),
                          new Text("  Signing-In...")
                        ],
                      ),
                      ));
                  _handleSignIn()
                      .whenComplete(() =>  navToHomepage();                
                }

In the end, it really depends up to you how you want the User Interface to look like.