Skip to content

Instantly share code, notes, and snippets.

@jmewes
Last active November 6, 2021 16:07
Show Gist options
  • Save jmewes/b9072e99f243fee249cf49f43ed8041b to your computer and use it in GitHub Desktop.
Save jmewes/b9072e99f243fee249cf49f43ed8041b to your computer and use it in GitHub Desktop.
How to create a full page loading indicator

Setup

A full page loading indicator can be created with the loader_overlay package.

flutter pub add loader_overlay
import 'package:loader_overlay/loader_overlay.dart';

Setup

Wrap the widget which should be covered by the loading indicator with the LoaderOverlay widget.

@override
Widget build(BuildContext context) {
  return LoaderOverlay(
    child: Material(
      child: LayoutBuilder(builder: (context, constraints) {
        return Container(
          height: constraints.maxHeight,

Show / Hide

Call the show or hide method on the loadOverlay property of the BuildContext.

if (snapshot.connectionState == ConnectionState.waiting) {
  context.loaderOverlay.show();
} else {
  context.loaderOverlay.hide();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment