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

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