pub package

Flutter Progress HUD

高度可定制的模态进度指示器，带淡入动画。

预览

用法

将您想要显示模态指示器的 Widget 包裹在 ProgressHUD 中。

ProgressHUD(
  child: HomePage(),
)

获取 ProgressHUD 的引用

final progress = ProgressHUD.of(context);

显示不确定进度

progress.show();

或带文本的进度

progress.showWithText('Loading...');

然后关闭

progress.dismiss();

示例（完整）

ProgressHUD(
        child: Builder(
          builder: (context) => Center(
                child: Column(
                  children: <Widget>[
                    RaisedButton(
                      child: Text('Show for a second'),
                      onPressed: () {
                        final progress = ProgressHUD.of(context);
                        progress.show();
                        Future.delayed(Duration(seconds: 1), () {
                          progress.dismiss();
                        });
                      },
                    ),
                    RaisedButton(
                      child: Text('Show with text'),
                      onPressed: () {
                        final progress = ProgressHUD.of(context);
                        progress.showWithText('Loading...');
                        Future.delayed(Duration(seconds: 1), () {
                          progress.dismiss();
                        });
                      },
                    ),
                  ],
                ),
              ),
        ),
      ),

自定义

属性名 默认值 描述
indicatorColor Colors.white 在使用默认指示器 Widget 时，这是设置其颜色的方法
indicatorWidget 一个基本的 CircularProgressIndicator 自定义指示器 Widget
backgroundColor Colors.black54 指示器背景颜色
backgroundRadius Radius.circular(8.0) 指示器背景半径
borderColor Colors.white 指示器背景边框颜色
borderWidth 0.0 指示器背景边框宽度
barrierEnabled 真 如果您想在显示进度时允许触摸，可以禁用模态屏障
barrierColor Colors.black12 指示器后显示的屏障颜色
文本样式 TextStyle(color: Colors.white, fontSize: 14.0) 指示器下方显示的文本的 TextStyle
padding EdgeInsets.all(16.0)} 指示器内容内边距

GitHub

查看 Github