How to create a full page loading indicator

note.md

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();
}