animated_reorderable_list_view

Description:

animated reorderable list view

animated_reorderable_list_view #
This library is a easy-to-use solution for implementing animated list 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 ListView with Animation.
✅ This class is an extension of standard ReorderableListView, enabling you to utilize all of its features. ReorderableListView class
✅ It can be both animated and reordered at the same time
✅ Animating items is as simple as updating the list.
✅ Customizable animation.
✅ Reorder, Insert, Remove, Move, Swap, Multiple-Removes

Installing #
flutter pub add animated_reorderable_list_view
flutter pub get
copied to clipboard
Usage #
class AnimatedReorderableListViewExampleState
extends State<AnimatedReorderableListViewExample>
with SingleTickerProviderStateMixin {
final List<String> _items = List.generate(10, (index) => 'Item ${index + 1}');
late final AnimationController animationController;

@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
}

@override
void dispose() {
animationController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {

var animatedReorderableListView = AnimatedReorderableListView(
state: this,
items: _items,
animationController: animationController,
onReorder: (oldIndex, newIndex) {
setState(() {
_items.insert(oldIndex < newIndex ? newIndex - 1 : newIndex,
_items.removeAt(oldIndex));
});
},
children: [
for (int i = 0; i < _items.length; ++i)
ListTile(key: GlobalKey(),
title: Text(_items[i]),
trailing: ReorderableDragStartListener(
index: i,
child: const Icon(Icons.drag_handle),
))
],
);
return Scaffold(
appBar: AppBar(
actions: [
IconButton(
icon: const Icon(Icons.add),
onPressed: () {
animatedReorderableListView.insert(0, 'New Item');
},
),
IconButton(
icon: const Icon(Icons.delete),
onPressed: () {
animatedReorderableListView.removeAt(0);
},
),
],
),
body: animatedReorderableListView,
);
}
}
copied to clipboard