How to create progress dialog while executing task and after complete task dialog should be dismiss?

Question

How do I add Progressbar?

After click button, I need to display a progress bar while executing the task and after complete task, the dialog should be dismissed and move to next page if successful login.

in Raised Button:

onPressed: () async {
  (isOffline)
  ? showSnackBar(context)
  : checkingValidation(usernameController, context, _url);
}


checkingValidation(TextEditingController usernameController, BuildContext context, String _url) async {
if(....){
...
}else{
    Navigator.push(
       context,
       MaterialPageRoute(
       builder: (context) => HomePage()))
}

Answer 1

You should use Stack and inside that use alert dialog as you want. Add a flag like bool showProgress , whenever you need a progress alert dialog to be shown or hide just set showProgress=true or showProgress=false respectively in setState to show or hide the alert dialog widget.

or simply use this template I created.

  static showProgressDialog(BuildContext context, String title) {
    try {
      showDialog(
          context: context,
          barrierDismissible: false,
          builder: (context) {
            return AlertDialog(
              content: Flex(
                direction: Axis.horizontal,
                children: <Widget>[
                  CircularProgressIndicator(),
                  Padding(padding: EdgeInsets.only(left: 15),),
                  Flexible(
                      flex: 8,
                      child: Text(
                        title,
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.bold),
                      )),
                ],
              ),
            );
          });
    } catch (e) {
      print(e.toString());
    }
  }

when you want to show this just call AppUtils.showProgressDialog(context, "Please wait");

when you have done task, just call Navigator.pop(context);

You can create a class as AppUtils and place this template in class, so you can reuse this anywhere in your app.