Flutter显示加载对话框(ProgressDialog)

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

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

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

使用对话框插件

添加依赖

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

1 2	dependencies: modal_progress_hud: ^0.1.3

下载插件

1	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的值来控制对话框的展示：

展示对话框：

1
2
3

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

隐藏对话框：

1
2
3

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

对话框的构造选项

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

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

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

inAsyncCall：控制对话框的显示状态。
child：子Widget。

通过其他的选项我们可以控制背景的透明度，颜色，展示样式等属性，有兴趣的同学可以逐一尝试一下。

本文原创地址为：https://www.examplecode.cn/2019/04/04/flutter-progress-dialog/
转载请注明出处。

我的博客中关于Flutter的所有文章可以点击这里找到，欢迎关注！