diffutil_sliverlist

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein SliverList-Widget, das Änderungen an Elementen automatisch mit dem DiffUtil-Algorithmus animiert und so reibungslose und effiziente Aktualisierungen sicherstellt, wenn sich die zugrunde liegende Datenliste ändert. Es nutzt diffutil.dart, um minimale Unterschiede zwischen alten und neuen Listen zu berechnen, wobei nur notwendige Animationen und Neuerstellungen angewendet werden. Ideal für große, dynamische scrollbare Listen, bei denen Leistung und visuelle Flüssigkeit entscheidend sind. Das Paket integriert sich nahtlos in die Sliver-Architektur von Flutter und unterstützt alle wichtigen Plattformen.

Anwendungsfälle

Dynamische scrollbare Listen mit häufigen Aktualisierungen
Effizientes Umsortieren von Elementen in einer scrollbaren Ansicht
Glatte Übergänge beim Hinzufügen/Entfernen von Listenelementen
Große Datensätze, die eine optimierte Darstellung erfordern
Echtzeit-Datenströme in scrollbaren Schnittstellen

Hauptmerkmale

Automatische Animation von Listenänderungen
Verwendet DiffUtil für minimale Updates
Optimierter Leistung für große Listen
Nahtlose Integration mit Sliver-Widgets
Cross-Platform-Unterstützung für alle Flutter-Ziele

Geeignet für

Entwickler, die reibungslose Listenanimationen benötigen
Apps mit Echtzeit- oder häufig wechselnden Daten
leistungsensitive Scroll-Schnittstellen
Flutter-Entwickler, die Sliver-basierte Layouts verwenden
Projekte, die minimales Boilerplate für Listenvergleiche erfordern

Hinweise

Erfordert Verständnis des DiffUtil-Konzepts
Kann bei sehr kleinen Listen Overhead verursachen
Beschränkte Anpassung des Animationsverhaltens
Hängt von externer diffutil.dart-Paket ab
Nicht geeignet für nicht-listenbasierte Schilfarten

Original-README

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

A SliverList that implicitly animates changes.

It supports two use cases:

Animating changes from a list of widgets with unique keys

When you have a list of Widgets and can give each Widget a unique key, you can use DiffUtilSliverList.fromKeyedWidgetList.

See the example code:

class _ExpandableListsState extends State<ExpandableLists> {
  bool expanded = false;

  @override
  Widget build(BuildContext context) {
    return DiffUtilSliverList.fromKeyedWidgetList(
      children: [
        ListTile(
          key: Key("1"),
          title: Text("first"),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          key: Key("2"),
          title: Text("second"),
          trailing: Icon(Icons.chevron_right),
        ),
        if (this.expanded)
          for (int i = 3; i < 6; i++)
            ListTile(
              key: Key(i.toString()),
              title: Text("index: $i"),
              trailing: Icon(Icons.chevron_right),
            ),
        ListTile(
          key: Key("expand_collapse"),
          onTap: () => setState(() {
            expaned = !expaned;
          }),
          title: Text(expanded ? "collapse" : "expand", style: TextStyle(fontWeight: FontWeight.bold),),
          trailing: Icon(expanded ? Icons.expand_less : Icons.expand_more),
        )
      ],
      insertAnimationBuilder: (context, animation, child) => FadeTransition(
        opacity: animation,
        child: child,
      ),
      removeAnimationBuilder: (context, animation, child) => FadeTransition(
        opacity: animation,
        child: SizeTransition(
          sizeFactor: animation,
          axisAlignment: 0,
          child: child,
        ),
      ),
    );
  }
}

And the result:

Building Widgets from a list of data objects that implement ==

Example:


Widget build(BuildContext context) {
    return CustomScrollView(
             slivers: [
               DiffUtilSliverList<int>(
                 items: list,
                 builder: (context, item) => 
                   Container(
                     color: colors[item % colors.length],
                     height: 48,
                     width: double.infinity,
                 ),
                 insertAnimationBuilder: (context, animation, child) =>
                     FadeTransition(
                       opacity: animation,
                       child: child,
                 ),
                 removeAnimationBuilder: (context, animation, child) =>
                     SizeTransition(
                       sizeFactor: animation,
                       child: child,
                 ),
                 removeAnimationDuration: const Duration(milliseconds: 3000),
                 insertAnimationDuration: const Duration(milliseconds: 1200),
             ),
           ],
         );
}

If list changes, the list will automatically animate new/removed items:

If the items don't implement == correctly, you can pass your own equalityChecker.

Pakete, Repositories und App-Kategorien suchen