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 |