flutter modal progress hud
a simple flutter widget wrapper to enable modal progress hud (a modal progress indicator, hud = heads up display).
usage
modalprogresshud(child: _buildwidget(), inasynccall: _saving)
simply wrap the widget as a child of modalprogresshud
, typically a form, together with a boolean
maintained in local state.
on first loading, the boolean is false, and the child is displayed.
after submitting, and before making the async call, set the local boolean to
true. the child will redraw and will show the modal progress hud.
after they async call completes, set the boolean to false. the child will
redraw without the modal progress indicator.
class settingspage extends statefulwidget {
@override
_settingspagestate createstate() => new _settingspagestate();
}
class _settingspagestate extends state<settingspage> {
bool _saving = false;
void _submit() {
setstate(() {
_saving = true;
});
//simulate a service call
print('submitting to backend...');
new future.delayed(new duration(seconds: 4), () {
setstate(() {
_saving = false;
});
});
}
widget _buildwidget() {
return new form(
child: new column(
children: [
new switchlisttile(
title: const text('bedroom'),
value: _bedroom,
onchanged: (bool value) {
setstate(() {
_bedroom = value;
});
},
secondary: const icon(icons.hotel),
),
new raisedbutton(
onpressed: _submit,
child: new text('save'),
),
],
),
);
}
@override
widget build(buildcontext context) {
return new scaffold(
appbar: new appbar(
title: new text('flutter progress indicator demo'),
backgroundcolor: colors.blue,
),
body: modalprogresshud(child: _buildwidget(), inasynccall: _saving),
);
}
}
Comments are closed.