如何在执行任务时创建进度对话框，并在完成任务对话框后应关闭？

Question

如何添加进度条？

单击按钮后，我需要在执行任务时显示进度条，完成任务后，如果成功登录，应关闭该对话框并移至下一页。

在凸起按钮中：

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

Stack您应该根据需要使用并在其中使用警报对话框。添加一个标志，例如bool showProgress，每当您需要显示或隐藏进度警报对话框时，只需设置showProgress=true或showProgress=false分别setState以显示或隐藏警报对话框小部件。

或者直接使用我创建的这个模板。

  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());
    }
  }

当你想展示这个时，只需致电 AppUtils.showProgressDialog(context, "Please wait");

当你完成任务后，只需调用Navigator.pop(context);

您可以创建一个类AppUtils并将此模板放置在类中，这样您就可以在应用程序中的任何位置重用它。