Clever List

A ListView widget that implicitly animates changes. CleverLists are built from a list of data objects.

Usage

Using CleverList is straightforward. You need to create a list of items, define a builder function for rendering each item, and specify optional animations for insertion and removal.

First you need data for your list. The list uses the == operator to compare them. You can also set your own comparison by using equalityChecker.

// Your data that you want to use to build the list.
var persons = <String>[
  'Rick',
  'Beth',
  'Jerry'
];

Then you can use this data for your widget.

CleverList<String>(
  items: persons,
  builder: (context, value) {
    return ListTile(
      title: Text(value),
    );
  },
)

Now when persons changes and the state is updated, the list will automatically animate the changes.

Customization

Use insertDuration and removeDuration to customize the durations for the insert and remove durations.

You can use the insertTransitionBuilder and removeTransitionBuilder parameters to create your custom insertion and removal animations.

For more advanced use cases, you can extend CleverListBase or CleverListWidget for your own implementation.

Acknowledgements

This package is greatly inspired by diffutil_sliverlist ❤️.