How to animate list changes in Flutter - dart

Question

If I have a list (of ListTiles for example) that can be added to, removed from, and swapped, what would be the best way to animate these changes? I am using a reorderable list if that makes a difference. Right now my list has no animations, I just call setState when data is changed.

Answer 1

I think you need AnimatedList...I wrote an example.
You can only set Duration when you want to insert into the list or delete from the List and this is achieved by creating a GlobalKey of AnimatedListState...
I wrote an example code for inserting
class Pool extends StatelessWidget {
final keys = GlobalKey<AnimatedListState>();
var list = List.generate(3, (i) => "Hello $i");
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: AnimatedList(
key: keys,
initialItemCount: list.length,
itemBuilder: (context, index, animation) {
return SlideTransition(
position: animation.drive(
Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
.chain(CurveTween(curve: Curves.ease))),
child: ListTile(
title: Text(list[index]),
),
);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
list.insert(0, "NothingYay");
keys.currentState.insertItem(0, duration: Duration(seconds: 2));
},
),
);
}
}
I hope this helps you.
Check Flutter Widget Of The Week (AnimatedList)

Answer 2

You can also try using AutomaticAnimatedList
https://pub.dev/packages/automatic_animated_list
It automatically computes which items to animate for you.
class ItemsAnimatedList extends StatelessWidget {
final List<ItemModel> items;
const ItemsList({
Key key,
this.items,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return AutomaticAnimatedList<ItemModel>(
items: items,
insertDuration: Duration(seconds: 1),
removeDuration: Duration(seconds: 1),
keyingFunction: (ItemModel item) => Key(item.id),
itemBuilder:
(BuildContext context, ItemModel item, Animation<double> animation) {
return FadeTransition(
key: Key(item.id),
opacity: animation,
child: SizeTransition(
sizeFactor: CurvedAnimation(
parent: animation,
curve: Curves.easeOut,
reverseCurve: Curves.easeIn,
),
child: ListTile(title: Text(item.name)),
),
);
},
);
}
}

Answer 3

I assume you are trying to implement the swipe feature in your list.
There is a gesture named Dissmisable
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// MyApp is a StatefulWidget. This allows us to update the state of the
// Widget whenever an item is removed.
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
#override
MyAppState createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
final items = List<String>.generate(3, (i) => "Item ${i + 1}");
#override
Widget build(BuildContext context) {
final title = 'Dismissing Items';
return MaterialApp(
title: title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return Dismissible(
// Each Dismissible must contain a Key. Keys allow Flutter to
// uniquely identify Widgets.
key: Key(item),
// We also need to provide a function that tells our app
// what to do after an item has been swiped away.
onDismissed: (direction) {
// Remove the item from our data source.
setState(() {
items.removeAt(index);
});
// Then show a snackbar!
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text("$item dismissed")));
},
// Show a red background as the item is swiped away
background: Container(color: Colors.red),
child: ListTile(title: Text('$item')),
);
},
),
),
);
}
}