blurry_modal_progress_hud

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

BlurryModalProgressHud ist ein Flutter-Widget, das einen modalen Fortschrittsindikator mit verschwommenem Hintergrund anzeigt, ähnlich wie ModalProgressHud, jedoch mit verbesserter visueller Wirkung. Es umgibt eine Widget-Baumstruktur und zeigt eine Ladeüberlagerung an, die den darunterliegenden Inhalt verdeckt und Benutzern während asynchroner Operationen Rückmeldung gibt. Der Verschwommene Effekt verbessert die Benutzeroberfläche durch einen modernen, durchscheinenden Look. Ideal zur Verbesserung der Benutzererfahrung während Ladezustände auf mehreren Plattformen.

Anwendungsfälle

Ladeanzeiger während des Datenabrufs anzeigen
Verbesserung der Benutzererfahrung in Formularen mit asynchroner Verarbeitung
Fortschritt bei Netzwerk-Anfragen anzeigen
Visuell ansprechende Overlays in mobilen Apps erstellen
Verbesserung der Schnittstellenklarheit bei langwierigen Aufgaben

Hauptmerkmale

Verschwommener Hintergrund für moderne Ästhetik
Einfache Wrapper-Integration
Plattformübergreifende Unterstützung (Android, iOS, Web, macOS, Windows, Linux)
Anpassbarer Ladeindikator
Leichtgewichtig und einfach zu implementieren

Geeignet für

Entwickler, die verfeinerte Lade-UIs suchen
Apps, die subtile, aber effektive Ladefeedback erfordern
Projekte mit visuellen Elementen im Stil von Material Design 3
Teams, die bei asynchronen Operationen die Benutzererfahrung priorisieren
Flutter-Anfänger erkunden Fortschrittsindikatoren

Hinweise

Kann die Leistung auf Low-End-Geräten aufgrund der Blur-Rendering-Technik beeinträchtigen
Für Lesbarkeit erfordert sorgfältige Farbkontraste
Nicht geeignet für Bedürfnisse der Hochkontrast-Zugänglichkeit
Begrenzte Anpassungsmöglichkeiten außer Fokus und grundlegenden Stilen
Abhängig von plattformspezifischen Rendering-Funktionen

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

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

Pakete, Repositories und App-Kategorien suchen