Displaying a loading overlay or progress HUD in Flutter
๐ก
Check out my app, Timelog. Built with Flutter!
Introduction
Sometimes, in an app, you want to perform an asynchronous operation and want to prevent the user from tapping/using the app while this operation is in progress. A simple example would b...
dartling.dev8 min read
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 ๐ช!