coordinator_layout

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das coordinator_layout-Paket bietet eine Reihe von Widgets und Layouts, die darauf ausgelegt sind, das Verhalten von einrollbaren Headern in Flutter-Anwendungen zu verwalten. Inspiriert durch Androids CoordinatorLayout ermöglicht es reibungslose, koordinierte Scroll-Interaktionen zwischen Headern und darunterliegendem Inhalt. Diese Bibliothek ist ideal für die Erstellung dynamischer, reaktiver Benutzeroberflächen, bei denen Header beim Scrollen zusammenfallen oder Inhalt freigeben. Sie unterstützt mehrere Plattformen wie Mobile, Web und Desktop und ist somit vielseitig für die plattformübergreifende Entwicklung geeignet. Das Paket integriert sich nahtlos mit bestehenden Flutter-Widgets, um native Scroll-Erfahrungen zu liefern.

Anwendungsfälle

Implementierung von einklappbaren App-Leisten
Dynamische scrollbare Schnittstellen erstellen
Responsive Kopfzeilenlayouts erstellen
Verbesserung der Benutzererfahrung durch sanftes Scrollen
Komplexe Scroll-Verhalten gestalten

Hauptmerkmale

Kollabierende Kopfzeilenanimationen
Plattformübergreifende Kompatibilität
Integration mit ScrollController
Unterstützung für verschachteltes Scrollen
Anpassbares Layoutverhalten

Geeignet für

Entwickler von Material-Design-Apps
UI-Designer, die fortgeschrittene Scroll-Effekte suchen
Apps mit dynamischen Kopfzeilen-Interaktionen
Plattformübergreifende Flutter-Projekte
Komplexe Scroll-UI-Muster

Hinweise

Erfahrung mit Scrollcontrollern erforderlich
Kann die Komplexität für einfache Layouts erhöhen
Am besten geeignet für fortgeschrittene Benutzeroberflächendesigns
Die Leistung hängt von der Widget-Nesting ab
Eingeschränkte Dokumentation im Vergleich zu den Kern-Flutter-Widgets

Original-README

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

a Library contains widget/layout to handle collapsing header behavior

Example

CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    headers: [
        SliverCollapsingHeader(
            builder: (context, offset, diff) {
                return ...;
            },
        ),
    ],
    body: Container(height: null, child: buildBody(context)),
),

Fit content

CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    header:[ 
        Builder(builder: (context) {
            return SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverSafeArea(
                top: false,
                sliver: SliverCollapsingHeader(
                builder: (context, offset, diff) {
                    return ...;
                },
                ),
            ),
            );
        }),
    ],
    body: Container(height: null, child: buildBody(context)),
),

Pakete, Repositories und App-Kategorien suchen