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?