当我们在开发APP时进行一些耗时操作,比如用户HTTP请求登录时,需要展示出一个模态的进度或加载对话框,防止用户重复操作。
本文我们就来介绍如何实现这样一个对话框。
实现进度对话框的话可以使用一个名叫modal_progress_hud
的插件。
使用对话框插件
添加依赖
要使用这个插件,首先在工程的pubspec.yaml
文件中加入对这个插件的依赖:
1 | dependencies: |
下载插件
1 | flutter packages get |
示例:展示对话框
由于当前的对话框我们需要全屏展示,所以我们在整个页面之上包裹一个ModalProgressHUD
,根据变量_saving
的值是true
还是false
来控制对话框的展示与否。
1 | ... |
这里我们使用的是StatefulWidget
,所以我们可以通过设置_saving
的值来控制对话框的展示:
展示对话框:
1 | setState(() { |
隐藏对话框:
1 | setState(() { |
对话框的构造选项
我们可以定制对话框的展示,下面是我们构造对话框对象时的选项:
1 | ModalProgressHUD( |
我们可以看到必选参数有两个:
- inAsyncCall:控制对话框的显示状态。
- child:子Widget。
通过其他的选项我们可以控制背景的透明度,颜色,展示样式等属性,有兴趣的同学可以逐一尝试一下。
本文原创地址为:https://www.examplecode.cn/2019/04/04/flutter-progress-dialog/
转载请注明出处。
我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!