animated_reorderable 1.4.2 copy "animated_reorderable: ^1.4.2" to clipboard
animated_reorderable: ^1.4.2 copied to clipboard

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

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

An animated image of the animated and reorderable ListView      An animated image of the animated and reorderable GridView

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.

6
likes
140
pub points
76%
popularity

Publisher

verified publisherigorkurilenko.dev

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on animated_reorderable