Flutter: Reorderable AND Animated ListView - any idea?

Question

I get that Flutter has different approaches for ListViews:

• ListView

• AnimatedList

• ReorderableListView

But is there also a possibility to combine all different functions?

I need a ReorderableListView to reorder items via drag & drop while being able to add and remove items with animations.

Am I missing something or is there no such thing? Trying things for hours alredy..

Any workarounds are also appreciated.

Frap

did you try using this package? pub.dev/packages/reorderables – Blais

Looking at the gifs in the description, this package does not come with add and remove animations either. - there must be a way somehow... – Frap

@Tobi You get any solution for this type of functionality my list is also reorderable and i want to animate on add and delete item of list, don't know how to get it. – Nonprofit

@Tobi I know Parth just asked you, but I encountered a similar situation. Did you find anything that works? – Chortle

No, unfortunately I didn't find anything that works well. However, I tried to build a workaround that has the list both on a reorderable and an animated list. Normally I the reordable list is displayed. But as soon as an item gets added or deleted, the reorderable list widget disappeares and the animated list widget appears. After the item is added or removed, the reordable list widget is shown again. – Frap

Answer 1

Try the new great_list_view library. It is still an alpha version, but it works very well and offer automatic animation when data changes, reordering also when animating, index and offset of items calculation, and more. Give it a try!

implicitly_animated_reorderable is bad written and bugged, and uses off stage widgets and other tricks, great_list_view doesn’t use any trick and works a charm!

Cushitic

Answer 2

I also needed a ListView that could combine all of these functionalities and because I couldn't find one I decided to create one by myself which is called implicitly_animated_reorderable_list and can be found here:

https://pub.dev/packages/implicitly_animated_reorderable_list

The package contains two ListViews: ImplicitlyAnimatedList which is based on AnimatedList and uses a diff algorithm (MyersDiff) to calculate the changes between two lists and automatically (or "implicitly") animates between them for. So you don't have two call insertItem or removeItem on the AnimatedListState manually anymore. Then theres ImplicitlyAnimatedReorderableList which extends this functionality and adds support to reorder its items.

For examples on how to use them please refer to the readme and the example application in the repository as this would be to long for a single answer.

Here is an example what it looks like (I had to compress it a bit as the max file size is 2mb):

Note that this package is still very young and I developed it in my spare time which is to say that it should not be considered production ready (yet).

Sussman

It's impossible to scroll while dragging an item using this package. – Unplaced

@SimpleUXApps Yes it is, well at least now. – Reeding

@bnxm Your library is awesome!! Many thanks, you saved my live! That said, you wrote that it's not production ready yet and I don't see why, since it works great. Is there anything I should be aware of, before using your library in production? – Reeding

The answer is no longer valid - This package is discontinued – Frap

Answer 3

For those who still finding for a plugin that combined Reorderable AND Animated ListView.

Just try great_list_view. It's easy to use and worked well in my app, I also checked the codebase and it looks so good in my opinion.

I tried implicitly_animated_reorderable_list plugin that was mentioned by @bnxm above but it's had issues when the height of dragging item is unconstrained.

Wilhelmina