{"id":13552331,"url":"https://github.com/mmcc007/modal_progress_hud","last_synced_at":"2025-04-06T08:14:06.029Z","repository":{"id":32699980,"uuid":"140527840","full_name":"mmcc007/modal_progress_hud","owner":"mmcc007","description":"A simple modal progress HUD (heads-up display, or progress indicator) for flutter","archived":false,"fork":false,"pushed_at":"2022-03-17T07:33:35.000Z","size":1509,"stargazers_count":159,"open_issues_count":13,"forks_count":69,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T06:10:25.850Z","etag":null,"topics":["android","dart","dart-library","flutter","flutter-demo","flutter-driver","flutter-example","flutter-plugin","flutter-test","form-validation","forms","ios","login","login-forms","login-page","modal","modal-dialog","modal-forms","progress-hud","progress-indicator"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmcc007.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-11T05:52:56.000Z","updated_at":"2025-03-23T03:08:16.000Z","dependencies_parsed_at":"2022-09-13T08:40:36.134Z","dependency_job_id":null,"html_url":"https://github.com/mmcc007/modal_progress_hud","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmcc007%2Fmodal_progress_hud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmcc007%2Fmodal_progress_hud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmcc007%2Fmodal_progress_hud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmcc007%2Fmodal_progress_hud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmcc007","download_url":"https://codeload.github.com/mmcc007/modal_progress_hud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451665,"owners_count":20940944,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","dart","dart-library","flutter","flutter-demo","flutter-driver","flutter-example","flutter-plugin","flutter-test","form-validation","forms","ios","login","login-forms","login-page","modal","modal-dialog","modal-forms","progress-hud","progress-indicator"],"created_at":"2024-08-01T12:02:02.324Z","updated_at":"2025-04-06T08:14:05.937Z","avatar_url":"https://github.com/mmcc007.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# modal_progress_hud\n\nA simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display)\n\n[![pub package](https://img.shields.io/pub/v/modal_progress_hud.svg)](https://pub.dartlang.org/packages/modal_progress_hud)\n[![Build Status](https://travis-ci.org/mmcc007/modal_progress_hud.svg?branch=master)](https://travis-ci.org/mmcc007/modal_progress_hud)\n[![Coverage Status](https://coveralls.io/repos/github/mmcc007/modal_progress_hud/badge.svg?branch=master)](https://coveralls.io/github/mmcc007/modal_progress_hud?branch=master)\n\nInspired by [this](https://codingwithjoe.com/flutter-how-to-build-a-modal-progress-indicator/) article.\n\n\n## Demo\n\n![Demo](https://raw.githubusercontent.com/mmcc007/modal_progress_hud/master/modal_progress_hud.gif)\n\n*See example for details*\n\n\n## Usage\n\nAdd the package to your `pubspec.yml` file.\n\n```yml\ndependencies:\n  modal_progress_hud: ^0.1.3\n```\n\nNext, import the library into your widget.\n\n```dart\nimport 'package:modal_progress_hud/modal_progress_hud.dart';\n```\n\nNow, all you have to do is simply wrap your widget as a child of `ModalProgressHUD`, typically a form, together with a boolean that is maintained in local state.\n\n```dart\n...\nbool _saving = false\n...\n\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n     body: ModalProgressHUD(child: Container(\n       Form(...)\n     ), inAsyncCall: _saving),\n  );\n}\n```\n\n\n## Options\n\nThe current parameters are customizable in the constructor\n```dart\nModalProgressHUD(\n  @required inAsyncCall: bool,\n  @required child: Widget,\n  opacity: double,\n  color: Color,\n  progressIndicator: CircularProgressIndicator,\n  offset: double\n  dismissible: bool,\n);\n```\n\n\n## Example\n\nHere is an example app that demonstrates the usage. \n\n1. On initial load, `_saving` is false which causes your child widget to display\n2. When the form is submitted, `_saving` is set to true, which will display the modal\n3. Once the async call is complete, `_saving` is set back to false, hiding the modal\n\n\n```dart\nclass SettingsPage extends StatefulWidget {\n  @override\n  _SettingsPageState createState() =\u003e new _SettingsPageState();\n}\n\nclass _SettingsPageState extends State\u003cSettingsPage\u003e {\n  bool _saving = false;\n\n  void _submit() {\n\n    setState(() {\n      _saving = true;\n    });\n\n    //Simulate a service call\n    print('submitting to backend...');\n    new Future.delayed(new Duration(seconds: 4), () {\n      setState(() {\n        _saving = false;\n      });\n    });\n  }\n\n  Widget _buildWidget() {\n    return new Form(\n      child: new Column(\n        children: [\n          new SwitchListTile(\n            title: const Text('Bedroom'),\n            value: _bedroom,\n            onChanged: (bool value) {\n              setState(() {\n                _bedroom = value;\n              });\n            },\n            secondary: const Icon(Icons.hotel),\n          ),\n          new RaisedButton(\n            onPressed: _submit,\n            child: new Text('Save'),\n          ),\n        ],\n      ),\n    );\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return new Scaffold(\n      appBar: new AppBar(\n        title: new Text('Flutter Progress Indicator Demo'),\n        backgroundColor: Colors.blue,\n      ),\n      body: ModalProgressHUD(child: _buildWidget(), inAsyncCall: _saving),\n    );\n  }\n}\n\n```\n\nUpdate: See this [article](https://medium.com/@nocnoc/the-secret-to-async-validation-on-flutter-forms-4b273c667c03) on Medium about async form validation\n\nSee the [example application](https://github.com/mmcc007/modal_progress_hud/tree/master/example) source\nfor a complete sample app using the modal progress HUD. Included in the\nexample is a method for using a form's validators while making async\ncalls (see [flutter/issues/9688](https://github.com/flutter/flutter/issues/9688) for details).\n\n\n### Issues and feedback\n\nPlease file [issues](https://github.com/mmcc007/modal_progress_hud/issues/new)\nto send feedback or report a bug. Thank you!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmcc007%2Fmodal_progress_hud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmcc007%2Fmodal_progress_hud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmcc007%2Fmodal_progress_hud/lists"}