option to stagger insert and remove items

[rajd90]

This package is the best one I've found to animate a large list. In my app, I'm using it to help animate a list that gets filtered by the user....as the user applies or removes a filter I want the list to animate. But the problem is, if lots of items are added or removed at once, then animating them concurrently makes the animation look janky. e.g. if I'm added 100 new items at once into the middle of my list, then items underneath the new items have to really fast in the same animation duration.

I can make the animation take long if the list is longer, but to implement the same when lots of items are removed isn't as easy (as you can't access to old list without implementing didUpdateWidget).

It would be really great if there was an option to stagger the entry and removal of items. This would help the animation look smooth no matter how many items are added or removed. It would be great if we can define the animation in terms of delay and duration per item in this sort of scenario, rather than a total duration.

I've tried to do something similar on my own using the existing package but it isn't easy to implement without a lot of code. e.g. if items are added in lots of places (not all in the same part of the list), then it's quite hard to calculate the staggering, as the item builder only gives you the index of the item in the new version list, not the index of the item in the set of changed items.

I realise that this is basically a feature request, but I'm hoping it's far easier to implement in the package directly, than it is to hack to together using a combination of the index and didUpdateWidget (and basically calculate the diffs again).

[wwwdata]

So basically the problem is:

• you have a large list
• You insert for example 10 entries at once -> animation looks bad because too much is jumping around
• The solution would be to "queue" those insert animations and run them after another, so not all at once
• Same would also be true for deletes/moves

Is that what you suggest?

[rajd90]

Yes that's a good summary. Although, I'm thinking you can probably stagger the animation of each item in a single go, rather than do lots of individual animations/inserts.

I think I've made progress with my hacky approach, if it helps for reference:

  @override
  void didUpdateWidget(PlacesTabBarView oldWidget) {
    super.didUpdateWidget(oldWidget);
    _oldListLength = oldWidget.placesList.length;
    _newListLength = widget.placesList.length;
    print("list length: $_oldListLength -> $_newListLength");
    if (_newListLength >= _oldListLength) {
      _changed = widget.placesList
          .map((e) => e.id)
          .toSet()
          .difference(oldWidget.placesList.map((e) => e.id).toSet())
          .toList();
      // we add on (duration - delay), because the last item in the set difference, still needs time to animate on completely.
      _totalAnimationDuration = (_changed.length * _itemAnimationDelay) +
          (_itemAnimationDuration - _itemAnimationDelay);
    } else {
      _changed = oldWidget.placesList
          .map((e) => e.id)
          .toSet()
          .difference(widget.placesList.map((e) => e.id).toSet())
          .toList();
      _totalAnimationDuration = (_changed.length * _itemAnimationDelay) +
          (_itemAnimationDuration - _itemAnimationDelay);
    }
    print("_changed: ${_changed.length} item(s)");
    print(_changed
        .map((e) => widget.placesList
            .firstWhere((p) => p.id == e,
                orElse: () => oldWidget.placesList.firstWhere((p) => p.id == e))
            .name)
        .toList());
    print("total duration: $_totalAnimationDuration");
  }


  Widget buildAnimatedItem(
    BuildContext context,
    Animation<double> animation,
    Place place,
    int index,
  ) {
    int relIndex = this._changed.indexOf(place.id); // index starts at 0
    if (relIndex < 0) {
      relIndex = 0;
    }
    relIndex = this._changed.length - relIndex - 1;
    double start = (relIndex * _itemAnimationDelay) / _totalAnimationDuration;
    double end = ((relIndex * _itemAnimationDelay) + _itemAnimationDuration) /
        _totalAnimationDuration;
    print(
        "add. index: $relIndex, name: ${place.name}, start: $start, end: $end");
    if (start < 0.0) {
      end = 0.0;
      print("ERROR!!!");
    }
    if (end > 1.0) {
      end = 1.0;
      print("ERROR!!!");
    }

    return FadeTransition(
      opacity: Tween<double>(
        begin: 0.0,
        end: 1.0,
      ).animate(
        CurvedAnimation(
          parent: animation,
          curve: Interval(
            start,
            end,
            curve: Curves.slowMiddle,
          ),
        ),
      ),
      child: SizeTransition(
        axis: Axis.vertical,
        axisAlignment: -1.0,
        sizeFactor: Tween<double>(
          begin: 0.0,
          end: 1.0,
        ).animate(
          CurvedAnimation(
            parent: animation,
            curve: Interval(
              start,
              end,
              curve: Curves.easeOutBack,
            ),
          ),
        ),
        child: PlacesListItem(
          key: ValueKey(place.id),
          place: place,
          isAuthUser: this.widget.isAuthUser,
        ),
      ),
    );
  }

  Widget removedAnimatedItem(
    BuildContext context,
    Animation<double> animation,
    Place place,
  ) {
    int relIndex = this._changed.indexOf(place.id); // index starts at 0
    if (relIndex < 0) {
      relIndex = 0;
    }
    relIndex = this._changed.length - relIndex - 1;
    double start = (relIndex * _itemAnimationDelay) / _totalAnimationDuration;
    double end = ((relIndex * _itemAnimationDelay) + _itemAnimationDuration) /
        _totalAnimationDuration;
    print(
        "remove. index: $relIndex, name: ${place.name}, start: $start, end: $end");
    if (start < 0.0) {
      end = 0.0;
      print("ERROR!!!");
    }
    if (end > 1.0) {
      end = 1.0;
      print("ERROR!!!");
    }

    return FadeTransition(
      opacity: Tween<double>(
        begin: 0.0,
        end: 1.0,
      ).animate(
        CurvedAnimation(
          parent: animation,
          curve: Interval(
            start,
            end,
            curve: Curves.slowMiddle,
          ),
        ),
      ),
      child: SizeTransition(
        axis: Axis.vertical,
        axisAlignment: -1.0,
        sizeFactor: Tween<double>(
          begin: 0.0,
          end: 1.0,
        ).animate(
          CurvedAnimation(
            parent: animation,
            curve: Interval(
              start,
              end,
              curve: Curves.easeOutBack,
            ),
          ),
        ),
        child: PlacesListItem(
          key: ValueKey(place.id),
          place: place,
          isAuthUser: this.widget.isAuthUser,
        ),
      ),
    );
  }

[rajd90]

Hey....any more thoughts on this?

[wwwdata]

Hey....any more thoughts on this?

only wondering if an animated list, in this case, is even making sense. If you are really adding/removing tens or hundreds of items, then it is essentially a brand-new list. Why not create a new one in those cases? In this case, it's not like the animation is helping the user. Animated lists usually indicate to the user that maybe 1-2 items got added/removed at a specific place in the list. If you do this with a lot of things, you don't know where what has been added anyways as a user.