Package detailsv0.5.1

diffutil_sliverlist

A SliverList that implicitly animates changes using diffutil.dart.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 3.3K
Likes: 61
Pub points: 140

Install package

flutter pub add diffutil_sliverlist

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A SliverList widget that automatically animates item changes using the DiffUtil algorithm, ensuring smooth and efficient updates when the underlying data list changes. It leverages diffutil.dart to calculate minimal differences between old and new lists, applying only necessary animations and rebuilds. Ideal for large, dynamic scrollable lists where performance and visual fluidity are critical. The package integrates seamlessly with Flutter's Sliver architecture and supports all major platforms.

Use cases

Dynamic scrollable lists with frequent updates
Efficient reordering of items in a scrollable view
Smooth transitions when adding/removing list items
Large datasets requiring optimized rendering
Real-time data feeds in scrollable interfaces

Key features

Automatic animation of list changes
Uses DiffUtil for minimal updates
Optimized performance for large lists
Seamless integration with Sliver widgets
Cross-platform support across all Flutter targets

Suitable for

Developers needing smooth list animations
Apps with real-time or frequently changing data
Performance-sensitive scrolling interfaces
Flutter developers using Sliver-based layouts
Projects requiring minimal boilerplate for list diffs

Considerations

Requires understanding of DiffUtil concept
May have overhead for very small lists
Limited customization of animation behavior
Depends on external diffutil.dart package
Not suitable for non-list sliver types

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

diffutil_sliverlist

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),
             ),
           ],
         );
}