Pakete, Repositories und App-Kategorien suchen

Cover von flutter_progress_hud
Paketdetailsv2.0.2

flutter_progress_hud

Hochgradig anpassbarer Modus-Fortschrittsindikator mit Fade-Animation.

AndroidiOSWebmacOSWindowsLinux
30-Tage-Downloads
28.900
Likes
131
Pub-Punkte
150

Paket installieren

flutter pub add flutter_progress_hud

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein hochgradig anpassbarer Modalschaltflächen-Fortschrittsindikator für Flutter, der eine Ladeüberlagerung mit sanften Fade-Animationen anzeigt. Er bietet eine einfache Möglichkeit, Ladezustände während asynchroner Operationen anzuzeigen und zu verbergen, wodurch die Benutzererfahrung durch die Anzeige laufender Prozesse verbessert wird. Der HUD kann mit verschiedenen Nachrichten, Farben und Formen angepasst werden und unterstützt verschiedene Plattformen wie Mobilgeräte, Web und Desktop. Ideal für den Einsatz in Formularen, API-Aufrufen oder jeder anderen Operation, die visuelle Rückmeldung erfordert.

Anwendungsfälle

  • Anzeige des Ladezustands während API-Anfragen
  • Fortschritt bei Formularübermittlungen anzeigen
  • Verbesserung der Benutzererfahrung während des Datenabrufs
  • Feedback während Hintergrundaufgaben bereitstellen
  • Anzeigen des Verarbeitungsstatus bei langlaufenden Operationen

Hauptmerkmale

  • Fade-in- und Fade-out-Animationen
  • Anpassbare Nachricht und Erscheinungsbild
  • Unterstützt mehrere Plattformen
  • Einfache Anzeigen-/Ausblenden-Methoden
  • Konfigurierbare Überlagerungsfarbe und -transparenz
  • Reaktive Gestaltung über Geräte hinweg

Geeignet für

  • Entwickler, die Apps mit häufigen asynchronen Operationen erstellen
  • Teams, die Benutzererfahrung priorisieren
  • Projekte, die konsistente Ladeindikatoren erfordern
  • Apps für mehrere Plattformen
  • UI-intensiven Anwendungen, die ein abgerundetes Feedback benötigen

Hinweise

  • Kann eine sorgfältige Verwaltung erfordern, um eine Überlappung mit anderen Benutzeroberflächenelementen zu vermeiden
  • Anpassungsoptionen können die Komplexität bei einfachen Anwendungsfällen erhöhen
  • Leistungseinfluss bei sehr häufigen Anzeigen/Ausblenden-Zyklen
  • Nicht geeignet für nicht-modale Lade-Szenarien
  • Eingeschränkte integrierte Themen im Vergleich zu Drittanbieteralternativen

Original-README

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

pub package

Flutter Progress HUD

Highly customizable modal progress indicator with fade animation.

Preview

Usage

Wrap with ProgressHUD the widget on top of which you want to show the modal indicator.

ProgressHUD(
  child: HomePage(),
)

Get a reference of ProgressHUD

final progress = ProgressHUD.of(context);

Show indeterminate progress

progress.show();

Or a progress with text

progress.showWithText('Loading...');

Then dismiss

progress.dismiss();

Example (full)

ProgressHUD(
        child: Builder(
          builder: (context) => Center(
                child: Column(
                  children: <Widget>[
                    RaisedButton(
                      child: Text('Show for a second'),
                      onPressed: () {
                        final progress = ProgressHUD.of(context);
                        progress.show();
                        Future.delayed(Duration(seconds: 1), () {
                          progress.dismiss();
                        });
                      },
                    ),
                    RaisedButton(
                      child: Text('Show with text'),
                      onPressed: () {
                        final progress = ProgressHUD.of(context);
                        progress.showWithText('Loading...');
                        Future.delayed(Duration(seconds: 1), () {
                          progress.dismiss();
                        });
                      },
                    ),
                  ],
                ),
              ),
        ),
      ),

Customization

Attribute Name Default Value Description
indicatorColor Colors.white When using the default indicator widget, this is how you set its color
indicatorWidget A basic CircularProgressIndicator Custom indicator widget
backgroundColor Colors.black54 Indicator background color
backgroundRadius Radius.circular(8.0) Indicator background radius
borderColor Colors.white Indicator background border color
borderWidth 0.0 Indicator background border width
barrierEnabled true You can disable the modal barrier if you want to allow touches while the progress is shown
barrierColor Colors.black12 Color of the Barrier displayed behind the indicator
textStyle TextStyle(color: Colors.white, fontSize: 14.0) TextStyle for the Text displayed below the indicator
padding EdgeInsets.all(16.0)} Indicator content padding

Kategorien

Quell-Repository

Projekte, die dieses Paket verwenden