How to Animate new Items in a Listview.builder?

Viewed 371

I have a StreamBuilder getting data from Firebase RTDB. When a new child is generated, the list is updated. I would like to do some kind of animation to indicate that this new record has arrived.

I tried using FirebaseAnimatedList, but it doesn't work for me because I need to sort the list before displaying it.

My StreamBuilder code is:

StreamBuilder(
                stream: alimentarBloc.alimentarStream,
                builder: (BuildContext context, AsyncSnapshot<List<AlimentarModel>> snapshot){
                  if (snapshot.hasData) {
                    final alimentarList = snapshot.data;
                    if (alimentarList.length == 0) return _imagenInicial(context);
                    alimentarList.sort((a, b) => b.fecha.compareTo(a.fecha));
                    return Container(
                      decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.vertical(bottom: Radius.circular(20.0)),
                      ),
                      child: Stack(
                        children: <Widget>[
                          ListView.builder(
                            itemCount: alimentarList.length,
                            itemBuilder: (context, i) =>_crearItem(context, alimentarBloc, alimentarList[i]),
                            padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 20.0),
                          ),
                        ],
                      ),
                    );
                  } else if (snapshot.hasError) {
                    return Text(snapshot.error.toString());
                  } 
                    return Center (child: Image(image: AssetImage('assets/Preloader.gif'), height: 200.0,));
                },
            ),

How can I animate a new Item in the list?

UPDATE

I tried tu use AnimatedList as described in Animate Item in List, but It didn't work because I don't know how and where to indicate to the AnimatedList that a new Item was added (or removed).

These are the changes I made to replace listview.builder with AnimatedList...

                  AnimatedList(
                    key: listKey,
                    initialItemCount: alimentarList.length,
                    itemBuilder: (context, i, animation) =>_crearItem(context, alimentarBloc, alimentarList[i], animation),
                    padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 20.0),
                  ),

And to wrap _crearItem with an animation...

 SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(-1,0),
      end: Offset(0,0),
    ).animate(CurvedAnimation(parent: animation, curve: Curves.bounceIn, reverseCurve: Curves.bounceOut)),
   
    child: _crearItem //----

Since alimentarList comes complete from the StreamBuilder, where and how can I tell that a new element has arrived in the list using listKey.currentState.insertItem?

0 Answers
Related