Flutter AnimatedList - Adding a CurvedAnimation to a SlideTransition - flutter

Question

I've managed to get to a point where I have an AnimatedList which will slide in newly added items. A Dismissible widget that wraps my list items controls the remove animation. My question is how can I add some sort of animation curve to the SlideTransition so that I can control how the new list item appears when it slides in. Here's where I'm at so far:
#override
Widget build(BuildContext context) {
final checklists = Provider.of<Checklists>(context);
return AnimatedList(
key: listKey,
initialItemCount: checklists.lists.length,
itemBuilder: (ctx, i, animation) {
return SlideTransition(
position: CurvedAnimation(parent: ).drive(child) // <- this line needs changing
child: _buildListItem(checklists.lists[i], i),
);
},
);
}
I'm not sure what to do with the position argument. Previously for the standard SlideTransition I was simply using
animation.drive(Tween(begin: Offset(0.2, 0), end: Offset(0.0, 0))),
which works fine, but is lacking a curve ease. Any ideas?
Edit
Heres the complete .dart file for clarity as well as where I insert a new item from the parent widget:
GlobalKey<AnimatedListState> recentListsAnimationKey = GlobalKey();
class RecentLists extends StatefulWidget {
#override
_RecentListsState createState() => _RecentListsState();
}
class _RecentListsState extends State<RecentLists>
with TickerProviderStateMixin {
Widget _buildListItem(Checklist list, int listIndex) {
return Dismissible(
key: ObjectKey(list.id),
direction: DismissDirection.endToStart,
background: Container(
alignment: AlignmentDirectional.centerEnd,
color: Theme.of(context).accentColor,
child: Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
child: ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (ctx) => ListItemsScreen(list.id),
),
);
},
title: Text(list.name),
leading: Checkbox(
value: list.completed,
onChanged: (value) {
setState(() {
list.completed = value;
});
},
),
),
onDismissed: (direction) {
_onDeleteList(list, listIndex);
},
);
}
void _onDeleteList(Checklist list, int listIndex) {
Provider.of<Checklists>(context).deleteList(list.id);
recentListsAnimationKey.currentState
.removeItem(listIndex, (_, __) => Container());
Scaffold.of(context).showSnackBar(
SnackBar(
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
Provider.of<Checklists>(context).undoDeleteList(list, listIndex);
recentListsAnimationKey.currentState
.insertItem(listIndex, duration: Duration(milliseconds: 100));
},
),
content: Text(
'List deleted',
style: TextStyle(color: Theme.of(context).accentColor),
),
),
);
}
AnimationController _controller;
Animation<Offset> _position;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: 200),
vsync: this,
);
_position = Tween(
begin: Offset(0.5, 0),
end: Offset(0.0, 0),
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.decelerate,
),
);
_controller.forward();
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
#override
Widget build(BuildContext context) {
final checklists = Provider.of<Checklists>(context);
return AnimatedList(
key: recentListsAnimationKey,
initialItemCount: checklists.lists.length,
itemBuilder: (ctx, i, animation) {
return SlideTransition(
position: _position,
child: _buildListItem(checklists.lists[i], i),
);
},
);
}
}
Here is where I insert new items into the list. No slide animation is shown.
void createNewList(BuildContext context) {
if (nameController.text.isNotEmpty) {
Provider.of<Checklists>(context).addList(nameController.text);
recentListsAnimationKey.currentState.insertItem(0, duration: Duration(milliseconds: 100));
nameController.clear();
}
Navigator.of(context).pop();
}

Answer 1

Use the Animation.drive function with a CurveTween chained to your offset Tween. Your itemBuilder should look like this:
itemBuilder: (ctx, i, animation) {
return SlideTransition(
position: animation.drive(Tween(begin: Offset(2, 0.0), end: Offset(0.0, 0.0))
.chain(CurveTween(curve: Curves.elasticInOut))),
child: _buildListItem(checklists.lists[i], i),
);
},

Answer 2

In Flutter, Animation just a class which change data from start to end based on percent provided from AnimationController. You have to prepare position which instance of Animation<Offset>.
class DemoWidget extends StatefulWidget {
#override
_DemoWidgetState createState() => _DemoWidgetState();
}
class _DemoWidgetState extends State<DemoWidget>with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _position;
#override
Widget build(BuildContext context) {
final checklists = Provider.of<Checklists>(context);
return AnimatedList(
key: listKey,
initialItemCount: checklists.lists.length,
itemBuilder: (ctx, i, animation) {
return SlideTransition(
position: _position,
child: _buildListItem(checklists.lists[i], i),
);
},
);
}
#override
initState() {
super.initState();
_controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
_position = Tween(begin: Offset(0.2, 0), end: Offset(0.0, 0)).animate(CurvedAnimation(parent: _controller, curve: Curves.decelerate));
_controller.forward();
}
#override
dispose() {
_controller.dispose();
super.dispose();
}
}