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来控制对话框的展示与否。

1
2
3
4
5
6
7
8
9
10
11
12
...
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;
});

对话框的构造选项

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

1
2
3
4
5
6
7
8
9
ModalProgressHUD(
@required inAsyncCall: bool,
@required child: Widget,
opacity: double,
color: Color,
progressIndicator: CircularProgressIndicator,
offset: double
dismissible: bool,
);

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

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

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

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

如果有问题可以留言,或者给我发邮件lloyd@examplecode.cn,期待我们共同学习与成长!

坚持原创技术分享,您的支持将鼓励我继续创作!