We will focus on Flutter Animated List using AnimatedList and SizeTransition widget. Along the way we will also focus on Global Key in Flutter.
We will start by creating a stateful widget name HomePage(). And inside it we will declare a list item
final _items = [];And then we will create a global key
final GlobalKey<AnimatedListState> _key = GlobalKey();We will need this global key since we will do animation and transition.
And after that we will add a method for clicking on the button and show a new list widget on the screen.
void _addItem() {
_items.insert(0, "Item ${_items.length + 1}");
_key.currentState!.insertItem(0, duration: const Duration(seconds: 1));
}The above method adds an item in the _items list and this creates a new widget based on a new build. This build creates a new state object as well.
This state object is saved in the _key variable. This saving states is important for animation and transition.
The we added a remove method for removing and animation of the list items.
void _removeItem(int index) {
_key.currentState!.removeItem(index, (_, animation) {
return SizeTransition(
sizeFactor: animation,
child: const Card(
margin: EdgeInsets.all(10),
elevation: 10,
color: Colors.purple,
child: ListTile(
contentPadding: EdgeInsets.all(15),
title: Text("removing", style: TextStyle(fontSize: 24)),
),
),
);
;
}, duration: const Duration(seconds: 1));
_items.removeAt(index);
}In the above method we see that, we remove the state objects first for animation from _key.currentState and we also remove a list item from the _items List.
Inside the remove method we used SizeTransition() widget. See how we assigned the animation object here.
Let's take a look at our build method
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Animated List'),
),
body: AnimatedList(
key: _key,
initialItemCount: 0,
padding: const EdgeInsets.all(10),
itemBuilder: (_, index, animation) {
return SizeTransition(
key: UniqueKey(),
sizeFactor: animation,
child: Card(
margin: const EdgeInsets.all(10),
elevation: 10,
color: Colors.blue,
child: ListTile(
contentPadding: const EdgeInsets.all(15),
title:
Text(_items[index], style: const TextStyle(fontSize: 24, color: Colors.white)),
trailing: IconButton(
icon: Icon(Icons.delete, color: Colors.redAccent.withOpacity(0.9),),
onPressed: () => _removeItem(index),
),
),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: _addItem, child: const Icon(Icons.add)),
);
}Inside the build method, we used AnimatedList() widget, which takes a key object. It's very important, otherwise your app will crash.
And inside that, we used SizeTransition() widget.
Then we have floatingActionButton and the onPressed event.
