当我们在开发APP时进行一些耗时操作，比如用户HTTP请求登录时，需要展示出一个模态的进度或加载对话框，防止用户重复操作。

本文我们就来介绍如何实现这样一个对话框。

实现进度对话框的话可以使用一个名叫modal_progress_hud的插件。

一 使用对话框插件

添加依赖

要使用这个插件，首先在工程的pubspec.yaml文件中加入对这个插件的依赖：

dependencies:
  modal_progress_hud: ^0.1.3

下载插件

flutter packages get

示例：展示对话框
由于当前的对话框我们需要全屏展示，所以我们在整个页面之上包裹一个ModalProgressHUD，根据变量_saving的值是true还是false来控制对话框的展示与否。

...
bool _saving = false
...
@override
Widget build(BuildContext context) {
  return Scaffold(
     body: ModalProgressHUD(child: Container(
       Form(...)
     ), inAsyncCall: _saving),
  );
}
...

这里我们使用的是StatefulWidget，所以我们可以通过设置_saving的值来控制对话框的展示：

展示对话框：

setState(() {
  _saving = true;
});

隐藏对话框：

setState(() {
  _saving = false;
});

二.对话框的构造选项

我们可以定制对话框的展示，下面是我们构造对话框对象时的选项：

ModalProgressHUD(
  @required inAsyncCall: bool,
  @required child: Widget,
  opacity: double,
  color: Color,
  progressIndicator: CircularProgressIndicator,
  offset: double
  dismissible: bool,
);

我们可以看到必选参数有两个：

• inAsyncCall：控制对话框的显示状态。
• child：子Widget。
  通过其他的选项我们可以控制背景的透明度，颜色，展示样式等属性，有兴趣的同学可以逐一尝试一下。
  欢迎大家讨论留言，我们共同成长！！！