Flutter Listview issue adding items at the top - flutter

Question

I'm trying to create a simple lisview with animated items. Everything is working fine, BUT when I tried to add the items at the top the behavior of the animated item is wrong
Here is my state class
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
List<ItemAnimado> lista = [];
void _incrementCounter() {
setState(() {
_counter++;
lista.add(ItemAnimado(_counter.toString()));
//lista.insert(0, ItemAnimado(_counter.toString()));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder( itemCount: lista.length, itemBuilder: ( context, index,) {
return lista[index];
},),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Here is my animatedItem
class _ItemAnimadoState extends State<ItemAnimado> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> animation;
#override
void initState() {
super.initState();
_controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
animation = Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(CurvedAnimation(parent: _controller, curve: Curves.bounceOut));
_controller.forward();
}
#override
Widget build(BuildContext context) {
return SlideTransition(
position: animation,
//duration: Duration(seconds: 1),
child: Card(
elevation: 9,
color: Colors.white,
child: ListTile(
title: Text(widget.texto),
),
),
);
}
}
https://giphy.com/gifs/d5Yd3FZFNNKuTr5ku5

Answer 1

I found out how to make the code works as I wanted.
The State class is almost the same. BUT, now I have a globalKey for the AnimatedList.
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
void _incrementCounter() {
setState(() {
Provider.of<ItemProvider>(context).addItem(
ItemAnimado(texto: 'New item'), 0);
});
}
#override
Widget build(BuildContext context) {
final _itemProvider = Provider.of<ItemProvider>(context);
_itemProvider.providerKey(_listKey);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: AnimatedList(
key: _listKey,
initialItemCount: _itemProvider.listaItems.length,
itemBuilder: (context, index, animation) {
return SlideTransition(
//key: _myListKey,
position: animation.drive(Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
)),
child: Card(
elevation: 9,
color: Colors.white,
child: ListTile(
title: Text(_itemProvider.listaItems[index].texto),
),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
But the most important part is in how I manage the data. I'm using a Provider
I'm sending the Key to the Provider and in here I manage the insertItem inside the addItem function
class ItemProvider with ChangeNotifier {
List<ItemAnimado> _listaItems = [
ItemAnimado(texto: '1'),
ItemAnimado(texto: '2'),
ItemAnimado(texto: '3'),
];
GlobalKey<AnimatedListState> _listKey;
void providerKey(GlobalKey<AnimatedListState> key ){
_listKey = key;
}
List<ItemAnimado> get listaItems {
return [..._listaItems];
}
addItem(ItemAnimado nuevo, int index){
_listaItems.insert(0,nuevo);
_listKey.currentState.insertItem(index);
notifyListeners();
}
}
Here is a Gif with the final result
http://www.giphy.com/gifs/QybBE5E8kUUtxIbsnw

Answer 2

This is a case where you need to use Keys in your widgets. Here's a complete example:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
List<ItemAnimado> lista = [];
void _incrementCounter() {
setState(() {
_counter++;
lista.add(ItemAnimado(_counter.toString(), key: ValueKey(_counter)));
//lista.insert(0, ItemAnimado(_counter.toString()));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder( itemCount: lista.length, itemBuilder: ( context, index,) {
return lista[index];
},),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class ItemAnimado extends StatefulWidget {
final String texto;
ItemAnimado(this.texto, {Key key}) : super(key: key);
_ItemAnimadoState createState() => _ItemAnimadoState();
}
class _ItemAnimadoState extends State<ItemAnimado> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> animation;
#override
void initState() {
super.initState();
_controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
animation = Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(CurvedAnimation(parent: _controller, curve: Curves.bounceOut));
_controller.forward();
}
#override
Widget build(BuildContext context) {
return SlideTransition(
position: animation,
//duration: Duration(seconds: 1),
child: Card(
elevation: 9,
color: Colors.white,
child: ListTile(
title: Text(widget.texto),
),
),
);
}
}
Notice where we added key: ValueKey(_counter) in the creation of your ItemAnimado. The key tells Flutter which widgets have already been created and which ones have been newly added.
For more on Keys, see this video.