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

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 之类的标志，当您需要显示或隐藏进度警报对话框时，只需在setState 中分别设置showProgress=true 或showProgress=false 即可显示或隐藏警报对话框小部件。

或者干脆使用我创建的这个模板。

  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 的类并将此模板放在类中，这样您就可以在应用程序的任何地方重复使用它。