Анимации в списке с асинхронными данными, предоставленными потоком

Question

У меня есть Firestoreколлекция с 4 разными документами. В моем приложении есть список, в котором показаны все документы вListView. Я получаю документы черезStream. Пользователи могут удалять, перемещать и добавлять элементы. Когда пользователь перемещает элемент, я хочу, чтобы он анимировал то, как этот элемент перемещается выше / ниже других элементов (система перемещения создается за счет голосов "за" и "против", при этом элементы, получившие наибольшее количество голосов, находятся наверху, а элементы, получившие наибольшее количество голосов против, находятся наверху. дно). Когда элемент получает на 1 голос больше, чем элемент поверх него, он должен анимировать переключение элементов. Я знаю, что у этого анимированного списка нет встроенной поддержки. Как я могу заставить свой список делать анимацию, когда я получаю новые данные? Прямо сейчас все выглядит запутанным, и все мгновенно прыгает, потому что обычный ListView не предоставляет никаких анимаций для перемещения / вставки / удаления данных. Учитывая, что я работаю с асинхронными данными и потоками, этот процесс становится сложнее.Любые идеи о том, как я могу обнаружить изменения в потоке и анимировать текущий список в новое состояние списка? Означает ли это удаление / вставку / изменение позиций некоторых элементов.

Answer 1

Использовать неявно анимированный список

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