Custom Progress Dialog in Flutter with timer to dismiss.

While building a mobile application, there are several times when you must be using some sort of API calls. The API calls can take few seconds to be responded back from the server. Those few seconds, you do not wish to let your user do anything because you are not sure what the response will be exactly from the server. Such scenario could be user login. What would you do then?

You present the user with a progress bar. The progress bar will have some information for the user that will keep him/her waiting until a proper response is received from the web/server.

We would be using NDialog for this article.

dependencies:
  ndialog: ^3.2.1

We would use a timer for this example that will dismiss the dialog after few seconds but in reality you would be waiting for a response from another activity.

We will import the library on our screen:

import \'package:ndialog/ndialog.dart\';

These are the variables we will be using:

ProgressDialog progressDialog;
Timer timer;
int timerCount = 3;

We will have two functions. One is for starting the timer and the other for dismissing the dialog.

startTimer(){
  timer = Timer.periodic(
    Duration(seconds: 1),
    (_timer) {
      if(timerCount == 0){
        progressDialog.dismiss();
        _timer.cancel();
        setState(() {
          timerCount = 3;
        });
      }
      else{
        print(timerCount);
        setState(() {
          progressDialog.setMessage(Text(\"Please Wait for $timerCount seconds\"));
          timerCount--;
        });
      }
    }
  );
}

dismissDialog(){
  try{
    progressDialog.dismiss();
  }
  catch(err){
    print(err);
  }
}

Inside our screen, we will have a raised button that will call the progress dialog:

RaisedButton(
  child: Text(\'Show Dialog for 3 seconds\'),
  onPressed: () async {
    progressDialog = ProgressDialog(context, dismissable: false);
    progressDialog.setTitle(Text(\"Loading\"));
    progressDialog.setMessage(Text(\"Please Wait for $timerCount seconds\"));
    startTimer();
    progressDialog.show();
  },
)

You must notice that we call our timer right before we actually show our dialog. Because we would like to be synced.

• 

• 

The dialog has other properties also where you can pass your custom messages.