fluid_dialog

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Fluid Dialog ist ein Flutter-Paket, das dynamische, animierte Dialoge ermöglicht, die zwischen mehreren Inhaltseiten wechseln können. Es passt automatisch seine Größe und Ausrichtung basierend auf dem aktuellen Inhalt an und bietet eine reibungslose und responsive Benutzererfahrung über verschiedene Plattformen hinweg. Ideal für Modals, die ihr Layout ohne plötzliche Änderungen anpassen müssen, verbessert es die UI-Flüssigkeit in Apps, die flexible Dialogverhalten erfordern. Das Paket unterstützt alle wichtigen Plattformen, darunter Android, iOS, Web, macOS, Windows und Linux.

Anwendungsfälle

Dynamischer Inhaltswechsel in Modalen
Reagierender Dialoggröße
Glatte Übergänge zwischen Bildschirmzuständen
Adaptive Benutzeroberflächen für Mehrschrittformulare
Interaktive Hilfe oder Tutorial-Dialoge
Plattformübergreifende Dialogkonsistenz

Hauptmerkmale

Automatische Größe- und Ausrichtungsanimation
Mehrfachinhaltsunterstützung
Plattformübergreifende Kompatibilität
Glatte Übergänge zwischen Zuständen
anpassbare Animationen
Leichtgewichtig und einfach zu integrieren

Geeignet für

Entwickler, die interaktive Dialoge erstellen
Apps mit mehrstufigen Benutzerflüssen
UI-intensive Anwendungen, die fließende Übergänge benötigen
Plattformübergreifende Flutter-Projekte
Designsysteme, die adaptive Modals erfordern

Hinweise

Kann die Leistung bei komplexen verschachtelten Inhalten beeinträchtigen
Erfordert sorgfältige Zustandsverwaltung für den Inhaltwechsel
Die Animationszeit muss möglicherweise für bestimmte Anwendungsfälle abgestimmt werden
Begrenzte Anpassungsmöglichkeiten für nicht-standardmäßige Layouts
Am besten geeignet für einfache bis mittelkomplexe Dialogstrukturen

Original-README

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

cover

Fluid Dialog

A dialog that can switch between multiple contents and animates size and alignment dynamically.

Video Demo

Features 🎉

Navigate between different pages
Animated size and alignment
Fully customizable

Usage 🧪

To show a FluidDialog you typically use Flutter's showDialog function. You can also use your implementation to show the dialog.

Here's an example:

showDialog(
 context: context,
 builder: (context) => FluidDialog(
  // Set the first page of the dialog.
  rootPage: FluidDialogPage(
    alignment: Alignment.bottomLeft, //Aligns the dialog to the bottom left.
    builder: (context) => const TestDialog(), // This can be any widget.
  ),
 ),
);

To navigate in the dialog, use the DialogNavigator. It works similarly to the flutter navigator.

This only works for widgets in the FluidDialog

TextButton(
  onPressed: () => DialogNavigator.of(context).push(
    FluidDialogPage(
      builder: (context) => const SecondDialogPage(),
    ),
  ),
  child: const Text('Go to next page'),
),

Take a look at the example or demo for more code.

Pakete, Repositories und App-Kategorien suchen

Paket installieren