Flutter Retrigger Staggered Animation on ListView

Question

I am using flutter_staggered_animations in my app for my listView. It is working quite nice when starting the app.

Problem:

I want the animation to be triggered if I change the child-widget of the listView or even just the itemCount. So what I need is a rebuild of the staggeredList.

But how can I do that? I tried simply changing the child or itemCount with setState. But that is triggering an animation...

Couldn't find anything on this. Let me know if you need more info!

I use pretty much the exact code from the example:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

Answer 1

You can provide a new key on AnimationLimiter, and it will recreate the AnimationLimiter,

AnimationLimiter(
  key: ValueKey("$itemCount"),
  child: ListView.builder(

class STA extends StatefulWidget {
  const STA({super.key});

  @override
  State<STA> createState() => _STAState();
}

class _STAState extends State<STA> {
  int itemCount = 5;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          itemCount++;
          setState(() {});
        },
      ),
      body: AnimationLimiter(
        key: ValueKey("$itemCount"),
        child: ListView.builder(
          itemCount: itemCount,
          itemBuilder: (BuildContext context, int index) {
            return AnimationConfiguration.staggeredList(
              position: index,
              duration: const Duration(milliseconds: 375),
              child: SlideAnimation(
                verticalOffset: 50.0,
                child: FadeInAnimation(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 50,
                      color: index.isEven ? Colors.amber : Colors.purple,
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Answer 2

Because the widget AnimationLimiter of this package is prevent you reanimate when setState

Problem is if you remove that widget, ListView will be reanimate when you scroll back to old position, that will be ugly

If you still want animation like you want, I recommend you to write your custom AnimatedList, I have do one which AnimatedList like this :

AnimatedList(
      key: _listKey,
      itemBuilder: (_, index, animation) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(-0.5, 0.0),
            end: const Offset(0.0, 0.0),
          ).animate(animation),
          child: YourItemWidget(),
        );
      },
    )

then you can use insert function to add single item animate to list :

_listKey.currentState?.insertItem