Animations in List with async data provided by a Stream
Use implicitly animated list
https://pub.dev/packages/implicitly_animated_reorderable_list
// Specify the generic type of the data in the list.
ImplicitlyAnimatedList<MyGenericType>(
// The current items in the list.
items: items,
// Called by the DiffUtil to decide whether two object represent the same item.
// For example, if your items have unique ids, this method should check their id equality.
areItemsTheSame: (a, b) => a.id == b.id,
// Called, as needed, to build list item widgets.
// List items are only built when they're scrolled into view.
itemBuilder: (context, animation, item, index) {
// Specifiy a transition to be used by the ImplicitlyAnimatedList.
// See the Transitions section on how to import this transition.
return SizeFadeTransition(
sizeFraction: 0.7,
curve: Curves.easeInOut,
animation: animation,
child: Text(item.name),
);
},
// An optional builder when an item was removed from the list.
// If not specified, the List uses the itemBuilder with
// the animation reversed.
removeItemBuilder: (context, animation, oldItem) {
return FadeTransition(
opacity: animation,
child: Text(oldItem.name),
);
},
);
Alexandru Stroescu
Updated on December 22, 2022Comments
-
Alexandru Stroescu over 1 year
I have a
Firestore
collection with 4 different documents. In my app I have a list that shows every document in aListView
. I get the documents through aStream
. Users can delete, move and add items. When a user moves an item I want it to animate the way that the item moves above/below other items (the moving system is made through up votes and down votes, the most upvoted items being at the top, while the most downvoted being at the bottom). When an item gets 1 upvote more that the item on top of it, it should animate the switch of the items. I know that animated list does not have any native support for this. How can I get to tell my list to do an animation when I get new data? Right now everything looks confusing and everything is jumping instantly because the normal ListView does not provide any animations for moving/inserting/removing data. Given that I work with async data and streams that process becomes harder. Any ideas on how I can detect changes in the stream and animate the current list to the new state of the list? Whether that means removing/inserting/modifying the positions of some items.