Animating Lists with implicitlyAnimatedReorderableList in Flutter

Introduction

Animating list items in Flutter elevates the user experience by providing smooth transitions for insertions, deletions, and reorders. While Flutter’s built-in widgets like AnimatedList cover basic cases, implicitlyAnimatedReorderableList from the implicitly_animated_reorderable_list package offers a more declarative, battle-tested solution for Flutter list animations and reordering. In this tutorial, you’ll learn how to set up a reorderable, animated list with minimal boilerplate, control animation curves, and customize item appearance changes.

Why Use implicitlyAnimatedReorderableList for Flutter list animations

The primary advantages of implicitlyAnimatedReorderableList:

• Declarative diffing: Automatically animates changes when the underlying data changes.

• Reorder support: Built-in drag handles and callbacks for moving items.

• Extensible transitions: Swap, fade, slide, or custom tweens on a per-item basis.

These features make it ideal for building sophisticated list animation in Flutter without manually managing keys or animation controllers.

Setting Up Your Project

1. Add the dependency to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  implicitly_animated_reorderable_list

2. Import the package in your Dart file:

import 'package:implicitly_animated_reorderable_list/implicitly_animated_reorderable_list.dart';

3. Prepare a model with an id or unique key property to diff your items.

Building an Animated Reorderable List

Below is a concise example that displays a list of strings you can reorder by dragging a handle. When you add or remove items from the items list, Flutter list animations occur automatically.

class ReorderableStringList extends StatefulWidget {
  @override
  _ReorderableStringListState createState() => _ReorderableStringListState();
}

class _ReorderableStringListState extends State<ReorderableStringList> {
  List<String> items = List.generate(5, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Reorderable Animated List')),
      body: ImplicitlyAnimatedReorderableList<String>(
        items: items,
        areItemsTheSame: (a, b) => a == b,
        onReorderFinished: (oldIndex, newIndex, item) {
          setState(() {
            items.removeAt(oldIndex);
            items.insert(newIndex, item);
          });
        },
        itemBuilder: (context, itemAnimation, item, index) {
          return Reorderable(
            key: ValueKey(item),
            builder: (context, dragAnimation, inDrag) {
              return SizeFadeTransition(
                sizeFraction: 0.7,
                curve: Curves.easeInOut,
                animation: itemAnimation,
                child: ListTile(
                  leading: ReorderableDragHandle(
                    child: Icon(Icons.drag_handle),
                  ),
                  title: Text(item),
                  tileColor: inDrag ? Colors.blue[50] : null,
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            items.insert(0, 'New Item ${items.length + 1}');
          });
        },
      ),
    );
  }
}

Key points:

• ImplicitlyAnimatedReorderableList diffs the items list.

• areItemsTheSame helps identify unique items.

• Reorderable wraps drag logic and provides dragAnimation and inDrag flags.

• SizeFadeTransition animates both size and opacity on insertion/removal.

Customizing Animations

Out of the box, the package offers multiple transition widgets:

• FadeTransition: for opacity only.

• SizeFadeTransition: squeezes and fades.

• SlideTransition: enters from a side.

You can also build your own with AnimatedBuilder and the provided itemAnimation or dragAnimation.

Example: Using a slide animation on removal/insertion:

SlideTransition(
  position: Tween<Offset>(
    begin: Offset(1, 0),
    end: Offset(0, 0),
  ).animate(itemAnimation),
  child: ListTile(title: Text(item)),
);

For reorder drag feedback, animate the tile color or elevation based on dragAnimation:

Material(
  elevation: dragAnimation.value * 6,
  child: ListTile(
    tileColor: Colors.white,
    title: Text(item),
  ),
);

Tweaking duration in the list widget:

ImplicitlyAnimatedReorderableList(
  // ...
  insertDuration: Duration(milliseconds: 300),
  removeDuration: Duration(milliseconds: 300),
  // ...
)

Handling Complex Models

When items are complex data models, ensure areItemsTheSame only checks a unique identifier, not the entire object. Use updateItemBuilder to animate content changes within the same key:

updateItemBuilder: (context, animation, oldItem, newItem) {
  return FadeTransition(
    opacity: animation,
    child: ListTile(title: Text(newItem.name)),
  );
},

This enables smooth cross-fade when model properties change without changing the list order.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

With implicitlyAnimatedReorderableList, you get a powerful toolkit for Flutter list animations, reorderable UIs, and diff-based item updates—all without manual controller management. Experiment with built-in transitions or define your own to match your app’s branding. Whether you’re building a simple todo list or a complex data table, this package streamlines animation and user interactions.

By combining Flutter’s declarative UI and implicitlyAnimatedReorderableList, you’ll deliver polished, interactive lists that feel responsive and modern. Happy animating!