animated_reorderable 1.4.2

The best way to make Flutter's ListView or GridView animated and reorderable.

A convenient wrapper that makes ListView or GridView animated and reorderable.

    

Features

The AnimatedReorderable wrapper for ListView and GridView incorporates all the features present in standard AnimatedList, AnimatedGrid and ReorderableList, while introducing the following enhancements:

• Introduces the capability to reorder GridView items.
• Upgrades ListView or GridView to be animated and reorderable simultaneously.
• Animates the repositioning of all grid items during addition or removal.
• Enables deletion through a swipe gesture.
• Certain items can be configured as non-reorderable.
• Callbacks for tracking item drag and swipe events.
• In addition to programmatically initiating animated additions and removals, reordering can also be programmatically triggered.

Usage

Utilize AnimatedReorderable.list() or AnimatedReorderable.grid() to wrap ListView or GridView accordingly. Configure the following parameters:

• keyGetter: Required parameter to configure keys for uniquely identifying the items.
• onReorder: If you want to enable the reordering feature, specify a callback in which you should apply permutations on the items collection.

Here's an example of how to wrap a ListView:

import 'package:animated_reorderable/animated_reorderable.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: ListViewExample(),
    ),
  ));
}

class ListViewExample extends StatefulWidget {
  const ListViewExample({super.key});

  @override
  State<ListViewExample> createState() => _ListViewExampleState();
}

class _ListViewExampleState extends State<ListViewExample> {
  final items = [1, 2, 3, 4, 5];

  @override
  Widget build(BuildContext context) => AnimatedReorderable.list(
        // Configure the keyGetter using a function that
        // takes the index of the item and must return its unique key.
        keyGetter: (index) => ValueKey(items[index]),

        // Define the onReorder callback to synchronize the order
        // of items. The callback takes permutations that need to be
        // applied to the collection of items.
        onReorder: (permutations) => permutations.apply(items),

        listView: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) => Card(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Text('Item: ${items[index]}'),
            ),
          ),
        ),
      );
}

AnimatedReorderableState can be used to dynamically insert, remove or reorder items. To refer to the AnimatedReorderableState either provide a GlobalKey or use the static of method from an item's input callback. There are showcases on the Example page.