読み込みオーバーレイ

loading_overlay

A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display).

Started as a fork of modal_progress_hud Inspired by this article.

Demo

See example for details

Usage

Add the package to your pubspec.yml file.

dependencies:
  loading_overlay: ^0.4.0

Next, import the library into your widget.

import 'package:loading_overlay/loading_overlay.dart';

Now, all you have to do is simply wrap your widget as a child of LoadingOverlay, typically a form, together with a boolean that is maintained in local state.

...
bool _isSaving_ = false
...

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: LoadingOverlay(
      color: Colors.black.withOpacity(0.5),
      child: Container(
       Form(...)
      ),
      isLoading: _isSaving_
      ),
  );
}

Alternatively, show the overlay until a Future completes (non-breaking new feature):

// Start an async operation
final saveFuture = _saveFormAsync();

return LoadingOverlay.withFuture(
  future: saveFuture,
  color: Colors.black.withOpacity(0.5),
  child: Form(...),
);

Options

The current parameters are customizable in the constructor

LoadingOverlay({
  required bool isLoading,
  required Widget child,
  Widget progressIndicator = const CircularProgressIndicator(),
  Color? color,
});

// New: show overlay until a Future completes
LoadingOverlay.withFuture({
  required Future<void> future,
  required Widget child,
  Widget progressIndicator = const CircularProgressIndicator(),
  Color? color,
});

Update: See this article on Medium about async form validation

See the example application source for a complete sample app using the modal progress HUD. Included in the example is a method for using a form's validators while making async calls (see flutter/issues/9688 for details).

Issues and feedback

Please file issues to send feedback or report a bug. Thank you!