Displaying a loading overlay or progress HUD in Flutter

Thank you, I was looking for something like this. I ended up using a Riverpod variation of your overlay:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final showLoadingOverlayProvider = StateProvider<bool>((ref) => false);

class LoadingOverlay extends ConsumerWidget {
  final Widget child;

  LoadingOverlay({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final showLoadingOverlay = ref.watch(showLoadingOverlayProvider);
    return Stack(
      children: [
        child,
        if (showLoadingOverlay)
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 4.0, sigmaY: 4.0),
            child: const Opacity(
              opacity: 0.8,
              child: ModalBarrier(dismissible: false, color: Colors.black),
            ),
          ),
        if (showLoadingOverlay)
          Center(child: CircularProgressIndicator()),
      ],
    );
  }
}

Great article 💪!