sliver_reordarable_animated_list 0.1.0

A sliver-compatible reorderable list with built-in animation helpers for Flutter.

Features

• Sliver‑aware – works inside CustomScrollView alongside other slivers.
• Animated – items animate in and out using the supplied animation value.
• Drag handle support – drop in ReorderableDragStartListener or ReorderableDelayedDragStartListener as part of the item.
• Customizable proxy decorator – change the appearance of the dragged child via proxyDecorator callback.
• Auto‑scroll when dragging near the list edge; scalar can be tuned.
• Start/end callbacks to drive application state during reordering.

This widget is a thin wrapper around Flutter's SliverReorderableList that adds animation-friendly APIs and common helpers.

Getting started

This package is intended for use in Flutter applications that need a sliver-compatible reorderable list with entry/exit animations. Add the dependency to your pubspec.yaml:

dependencies:
  sliver_reordarable_animated_list:
    path: ../

Then import the library in your Dart code:

import 'package:sliver_reordarable_animated_list/sliver_reordarable_animated_list.dart';

For a complete runnable example see the /example directory.

Usage

Quick start

Insert the widget inside a CustomScrollView alongside other slivers. The itemBuilder callback provides an animation object that can be used to animate entries and removals. A typical implementation wraps the child in a SizeTransition or FadeTransition.

SliverReorderableAnimatedList(
  initialItemsCount: items.length,
  itemBuilder: (context, index, animation) {
    final item = items[index];
    return SizeTransition(
      sizeFactor: animation,
      child: ListTile(
        key: ValueKey(item),
        title: Text(item),
        leading: ReorderableDragStartListener(
          index: index,
          child: const Icon(Icons.drag_handle),
        ),
      ),
    );
  },
  onReorder: (oldIndex, newIndex) {
    setState(() {
      final element = items.removeAt(oldIndex);
      items.insert(newIndex > oldIndex ? newIndex - 1 : newIndex, element);
    });
  },
)

📁 See example/lib/main.dart for a full app that exercises the widget.

API overview

Property	Description
initialItemsCount	Number of items present in the list when it is built. Update
the widget if the backing list length changes.
itemBuilder	Builds each item; receives a double animation value.
onReorder	Called when the user finishes dragging an item to a new index.
onReorderStart	Called when a drag gesture begins.
onReorderEnd	Called when the drag operation completes or is canceled.
proxyDecorator	Customize the appearance of the floating drag proxy.
dragBoundaryProvider	Restrict drag movement to a specific area.
autoScrollerVelocityScalar	Tune scroll speed when dragging near edges.

Advanced topics

• Proxy decorators – use to add elevation, scaling or color changes while an item is being dragged.
• Drag boundaries – implement AnimatedReorderDragBoundaryProvider to constrain the draggable region (e.g. when nested scrollables are present).
• Changing item size – use itemExtent or itemExtentBuilder if your children have a known fixed height, which improves scrolling performance.

FAQ

Q: How do I animate separators or work with a SliverList that isn't built with the helper animation?
A: You can wrap the proxy children with whatever widgets you like and use AnimatedList for complex insertion/removal effects; the animation passed into itemBuilder is simply an Animation<double> driven by the underlying SliverReorderableList.

Q: Can I use this with SliverGrid?
A: Not directly. The underlying widget is a SliverReorderableList; grids would require a bespoke implementation.

Example app

Launch the example from the command line:

cd example
flutter run

The demo shows a list of 20 items. Drag the handle (on the left) to reorder items. The main.dart source is linked above and can be used as a starting point for your own app.

This repository is a simple package; contributions are welcome via GitHub pull requests. Please file issues if you encounter bugs or have feature requests. When publishing to pub.dev, the contents of this README will appear on the package page.