Search packages, repositories and app categories

blurry_modal_progress_hud cover
Package detailsv1.1.1

blurry_modal_progress_hud

Just like modal_progress_hud this is a simple widget wrapper to enable modal progress hud (a modal progress indicator, hud = heads up display)

AndroidiOSWebmacOSWindowsLinux
30-day downloads
514
Likes
42
Pub points
150

Install package

flutter pub add blurry_modal_progress_hud

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

BlurryModalProgressHud is a Flutter widget that displays a modal progress indicator with a blurred background, similar to ModalProgressHud but with enhanced visual appeal. It wraps a widget tree and shows a loading overlay that obscures the underlying content, providing users with feedback during asynchronous operations. The blur effect enhances the UI by creating a modern, translucent look. Ideal for improving user experience during loading states across multiple platforms.

Use cases

  • Displaying loading indicators during data fetching
  • Enhancing UX in forms with async processing
  • Showing progress in network requests
  • Creating visually appealing overlays in mobile apps
  • Improving interface clarity during long-running tasks

Key features

  • Blurred background for modern aesthetics
  • Simple wrapper integration
  • Cross-platform support (Android, iOS, Web, macOS, Windows, Linux)
  • Customizable loading indicator
  • Lightweight and easy to implement

Suitable for

  • Developers seeking polished loading UIs
  • Apps requiring subtle yet effective loading feedback
  • Projects aiming for Material Design 3-inspired visuals
  • Teams prioritizing user experience during async operations
  • Flutter beginners exploring progress indicators

Considerations

  • May impact performance on low-end devices due to blur rendering
  • Requires careful color contrast for readability
  • Not suitable for high-contrast accessibility needs
  • Limited customization beyond blur and basic styling
  • Depends on platform-specific rendering capabilities

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

blurry_modal_progress_hud

This is a clone and upgrade of modal_progress_hud

Just like modal_progress_hud this is a simple widget wrapper to enable modal progress hud (a modal progress indicator, hud = heads up display)

How it works

Image1

Image2

See example for details

Installation

Add the blurry_modal_progress_hud package to your pubspec.yml file.

dependencies:
  blurry_modal_progress_hud: ^1.1.1

Import the package into your dart file

import 'package:blurry_modal_progress_hud/blurry_modal_progress_hud.dart';

Usage

/// Wrap around any widget that makes an async call to show a modal progress
/// indicator while the async call is in progress.

/// The progress indicator can be turned on or off using [inAsyncCall]

/// The blurry effect's intensity can be be controlled using [blurEffectIntensity]

/// The progress indicator defaults to a [CircularProgressIndicator] but can be
/// any kind of widget. For this example the SpinKitFadingCircle package is used

/// The modal barrier can be dismissed using [dismissible]

/// The opacity of the modal barrier can be set using [opacity]

/// The color of the modal barrier can be set using [color]

/// The progress indicator can be positioned using [offset] otherwise it is
/// centered

BlurryModalProgressHUD(
    inAsyncCall: isLoading,  
    blurEffectIntensity: 4,
    progressIndicator: SpinKitFadingCircle(
    color: purpleColor,
    size: 90.0,
    ),
    dismissible: false,
    opacity: 0.4,
    color: black97Color,
    child: Scaffold(),
);

Options

Most of the parameters can be customized via the constructor

  BlurryModalProgressHUD({
    Key? key,
    required this.inAsyncCall,
    this.opacity = 0.3,
    this.color = Colors.grey,
    this.blurEffectIntensity = 1.0,
    this.progressIndicator = const CircularProgressIndicator(),
    this.offset,
    this.dismissible = false,
    required this.child,
  });

Example

See the example for a complete sample app using the blurry_modal_progress_hud

Contact

Contact me via email edinjoey@gmail.com

Categories

Source repository

Projects using this package

No data available yet.