GitLocker: The Coding Marketplace

Description:

flutter progress hud

Flutter Progress HUD #
Highly customizable modal progress indicator with fade animation.
Preview #

Usage #
Wrap with ProgressHUD the widget on top of which you want to show the modal indicator.
ProgressHUD(
child: HomePage(),
)
copied to clipboard
Get a reference of ProgressHUD
final progress = ProgressHUD.of(context);
copied to clipboard
Show indeterminate progress
progress.show();
copied to clipboard
Or a progress with text
progress.showWithText('Loading...');
copied to clipboard
Then dismiss
progress.dismiss();
copied to clipboard
Example (full) #
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();
});
},
),
],
),
),
),
),
copied to clipboard
Customization #

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