flutter pub add flutter_progress_hud基于插件公开信息、社区数据与项目使用情况整理的选型参考。
一个高度可定制的Flutter模态进度指示器，显示带有平滑淡入淡出动画的加载覆盖层。它提供了一种简单的方法来在异步操作期间显示和隐藏加载状态，通过指示正在进行的过程来改善用户体验。HUD 可以通过不同的消息、颜色和形状进行自定义，并支持移动、Web 和桌面等多种平台。非常适合用于表单、API 调用或任何需要视觉反馈的操作。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
Highly customizable modal progress indicator with fade animation.
Wrap with ProgressHUD the widget on top of which you want to show the modal indicator.
ProgressHUD(
child: HomePage(),
)
Get a reference of ProgressHUD
final progress = ProgressHUD.of(context);
Show indeterminate progress
progress.show();
Or a progress with text
progress.showWithText('Loading...');
Then dismiss
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();
});
},
),
],
),
),
),
),
| Attribute Name | Default Value | Description |
|---|---|---|
| indicatorColor | Colors.white | When using the default indicator widget, this is how you set its color |
| indicatorWidget | A basic CircularProgressIndicator | Custom indicator widget |
| backgroundColor | Colors.black54 | Indicator background color |
| backgroundRadius | Radius.circular(8.0) | Indicator background radius |
| borderColor | Colors.white | Indicator background border color |
| borderWidth | 0.0 | Indicator background border width |
| barrierEnabled | true | You can disable the modal barrier if you want to allow touches while the progress is shown |
| barrierColor | Colors.black12 | Color of the Barrier displayed behind the indicator |
| textStyle | TextStyle(color: Colors.white, fontSize: 14.0) | TextStyle for the Text displayed below the indicator |
| padding | EdgeInsets.all(16.0)} | Indicator content padding |