animated_reorderable_list

Description:

animated reorderable list

animated_reorderable_list #
This library is a powerful and easy-to-use solution for implementing animated list and grid with drag-and-drop functionality in Flutter.
Features #

✅ Smooth transition during item insertion and removal from the list with animations.
✅ Drag and Drop support (ReorderableList) for both ListView and GridView with Animation.
✅ It can be both animated and reordered at the same time
✅ Animating items is as simple as updating the list.
✅ Pre-built animation like fade,scale, slide, flip etc for Flutter list.
✅ Provides support for both lists and grids
✅ Supports large lists and creates items on demand as they come into the viewport.

Demo #
Reorderable List #

List Animations #

Grid Animations #

How to use it? #
In the pubspec.yaml, add the dependency:
dependencies:
animated_reorderable_list: <latest_version>
copied to clipboard
Import the file:
import 'package:animated_reorderable_list/animated_reorderable_list.dart';
copied to clipboard
Sample app demonstrates
how simple the usage of the library actually is.
Basic usage #
AnimatedReorderableGridView #
A AnimatedGridView with built-in support for drag and drop functionality.
AnimatedReorderableGridView(
items: list,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return ItemCard(
key: Key(list[index].name),
index: list[index].index);
},
sliverGridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),
enterTransition: [FadeIn(), ScaleIn()],
exitTransition: [SlideIn()],
insertDuration: const Duration(milliseconds: 300),
removeDuration: const Duration(milliseconds: 300),
onReorder: (int oldIndex, int newIndex) {
setState(() {
final User user = list.removeAt(oldIndex);
list.insert(newIndex, user);
});
},

)

copied to clipboard
AnimatedReorderableListView #
A AnimatedListView with built-in support for drag-and-drop functionality.
AnimatedReorderableListView(
items: list,
itemBuilder: (BuildContext context, int index) {
return ItemTile(
key: Key(list[index].name),
index: list[index].index);
},
enterTransition: [FlipInX(), ScaleIn()],,
exitTransition: [SlideInLeft()]
insertDuration: const Duration(milliseconds: 300),
removeDuration: const Duration(milliseconds: 300),
onReorder: (int oldIndex, int newIndex) {
setState(() {
final User user = list.removeAt(oldIndex);
list.insert(newIndex, user);
for (int i = 0; i < list.length; i++) {
list[i] = list[i].copyWith(index: list[i].index);
}
});
},
isSameItem: (a, b) => a.index == b.index
)

copied to clipboard

The isSameItem callback determines if two items are the same. It should return true if the two compared items are identical.

AnimatedListView #
A AnimatedListView that animates insertion and removal of the item.
AnimatedListView(
items: list,
itemBuilder: (BuildContext context, int index) {
return ItemTile(
key: Key(list[index].name),
index: list[index].index);
},
enterTransition: [FadeIn(), ScaleIn()],
exitTransition: [SlideIn()],
insertDuration: const Duration(milliseconds: 300),
removeDuration: const Duration(milliseconds: 300),
),

copied to clipboard
AnimatedGridView #
A AnimatedGridView that animates insertion and removal of the item.
AnimatedGridView(
items: list,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return ItemCard(
key: Key(list[index].name),
index: list[index].index);
},
sliverGridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),
enterTransition: [FadeIn(), ScaleIn()],
exitTransition: [SlideIn()],
insertDuration: const Duration(milliseconds: 300),
removeDuration: const Duration(milliseconds: 300),
)
copied to clipboard
Duration for animation #
//optional
insertDuration: const Duration(milliseconds: 300),
removeDuration: const Duration(milliseconds: 300),
copied to clipboard
The duration for item insertion and removal animation. If not specified, the default duration is Duration(milliseconds: 300).
Enter and exit Animation #
To apply animation, while inserting or removing item, specify a list of animation:
//optional
enterTransition: [FadeIn(), ScaleIn()],
exitTransition: [SlideIn()],
copied to clipboard
If not specified, then default FadeIn() animation will be applied.
Delay, duration, curve #
Animation have optional delay, duration, begin, end and curve parameters. Animations run
in parallel, but you can use a delay to run them sequentially:
//optional
enterTransition: [
FadeIn(
duration: const Duration(milliseconds: 300),
delay: const Duration(milliseconds: 100)),
ScaleIn(
duration: const Duration(milliseconds: 500),
curve: Curves.bounceInOut)
],
copied to clipboard
If a specific duration is provided for the animation, it will run for that specified duration.
However, if insertDuration or removeDuration are specified, it will override specific item duration.
Custom AnimationBuilder #
//optional
insertItemBuilder: (Widget child, Animation<double> animation){
return ScaleTransition(
scale: animation,
child: child,
);
}

removeItemBuilder: (Widget child, Animation<double> animation){
return ScaleTransition(
scale: animation,
child: child,
);
}
copied to clipboard
You can use custom insertItemBuilder or removeItemBuilder if you wish to implement your own customized animations instead of relying on the built-in animations provided by the library.
In these custom builder functions, the child parameter represents the widget returned by the itemBuilder callback, and the animation parameter provides the animation control.
If a custom insertItemBuilder is provided, it will override the enterTransition. Similarly, if removeItemBuilder is provided, then it will override exitTransition.
Bugs and Feedback #
We welcome and appreciate any suggestions you may have for improvement.
For bugs, questions and discussions please use
the Github Issues.

Acknowledgments #
This library builds upon the foundation laid by the incredible work of the Flutter team.
The core logic for animated list and drag-and-drop functionality are derived from Flutter's native widgets, specifically AnimatedList and ReorderableListView.
Credits #
animated_reorderable_list is owned and maintained by the Canopas team.
You can follow them on Twitter at @canopassoftware for
project updates and releases.
Inspired by recyclerview-animators in Android.