Animations in List with async data provided by a Stream

user_11221697 0
Viewed 1150

I have a Firestore collection with 4 different documents. In my app I have a list that shows every document in a ListView. I get the documents through a Stream. 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.

flutter-animatedlist async-await dart flutter
1 Answers

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),
    );
  },
);
user_42115200
Related