stacked_listview

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

StackedListView ist ein Flutter-Widget, das eine Liste von Kindern übereinander anzeigt, wobei das erste Element vollständig sichtbar ist und die nachfolgenden Elemente beim Scrollen teilweise überlappend erscheinen. Es erzeugt einen visuell ansprechenden Effekt, bei dem die Elemente scheinbar hintereinander gestapelt wirken und sich ideal für dynamische, mehrschichtige Listen-Schnittstellen eignen. Das Paket unterstützt alle wichtigen Plattformen, einschließlich Android, iOS, Web, macOS, Windows und Linux, was es äußerst vielseitig für plattformübergreifende Anwendungen macht. Es wurde für Entwickler konzipiert, die einzigartige Listenanimationen ohne komplexes benutzerdefiniertes Malen suchen.

Anwendungsfälle

Geschichtete scrollbare Listen erstellen
Das Gestalten von kartenbasierten Benutzeroberflächen mit Tiefe
Visuell reichhaltige Feed-Layouts erstellen
Implementierung interaktiver gestapelter Elementübergänge
Verbesserung der Navigation in mobilen Apps durch visuelle Hinweise

Hauptmerkmale

Gestapeltes Kind-Rendern
Glatte Scrollfunktion mit Schichtungseffekt
Plattformübergreifende Kompatibilität
Einfache Integration über pub
Anpassbares Stapelverhalten
Eingebaute Animationsunterstützung

Geeignet für

UI-Designer, die visuelle Tiefe suchen
Entwickler, die moderne App-Oberflächen erstellen
Apps mit Karten- oder Zeitachsen-Formatinhalten
Projekte, die subtile animierte Listen-Effekte erfordern
Flutter-Anfänger erkunden erweiterte Listenmuster

Hinweise

Kann die Leistung bei vielen Elementen beeinträchtigen
Erfordert sorgfältige Layoutplanung
Am besten geeignet für moderate Elementanzahlen
Begrenzte Anpassungsmöglichkeiten über das Stapeln hinaus
Nicht ideal für dichte Datenlisten
Benötigt Tests auf Low-End-Geräten

Original-README

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

A Stacked ListView

Video

v1.0.4 Breaking Change

onRemove(int index) changed to onRemove(int index, AxisDirection dir)
beforeRemove(int index) changed to beforeRemove(int index, AxisDirection dir)

🎉🎉 Yes, Now you can know the user's swipe direction for each list item 🎉🎉

Install

flutter pub add stacked_listview

Example code:

Scaffold(
  appBar: AppBar(),
  backgroundColor: Colors.black,
  body: SafeArea(
    child: StackedListView(
      padding: EdgeInsets.only(left: 20, right: 20, top: 50),
      itemCount: data.length,
      itemExtent: itemHeight,
      heightFactor: 0.7,
      fadeOutFrom: 0.7,
      onRemove: (index, direction) {
        setState(() {
          data.removeAt(index);
        });
      },
      beforeRemove: (index, direction) async {
        return await showDialog<bool>(
          context: context,
          builder: (_) => AlertDialog(
            title: Text('Delete ${data[index]} ?'),
            actions: [
              TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text('Cancel')),
              ElevatedButton(
                onPressed: () => Navigator.pop(context, true),
                child: Text('Delete'),
              ),
            ],
          ),
        ).then((value) => value == true);
      },
      builder: (_, index) {
        return Container(
          width: double.infinity,
          height: itemHeight,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
            color: Colors.white,
            boxShadow: [
              BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 10),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                data[index],
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              Text('Slide to left or right to delete'),
            ],
          ),
          padding: EdgeInsets.all(20),
        );
      },
    ),
  ),
);

Pakete, Repositories und App-Kategorien suchen

Paket installieren