I'm trying to display an AnimatedList
of ExpansionTiles/ListTiles
in Flutter
, and this is what happens:
This is my code:
Expanded (
child: Column(
children: [
Expanded(
flex: 10,
child: Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: Text(
"Results found: ${widget.guests.length}",
textScaleFactor: useMobileLayout ? 1 : 1.3,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
flex: 90,
child: Scrollbar(
child: buildList(),
),
),
],
),
)
Widget buildList(BoxConstraints constraints) {
return AnimatedList(
key: _animatedListKey,
initialItemCount: 10,
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index, Animation animation) {
return buildAnimatedItem(
widget.guests[index], index, animation);
},
);
}
Widget buildAnimatedItem(Guest guest, int index, Animation animation) {
return SizeTransition(
sizeFactor: animation.drive(
Tween(begin: 0.0, end: 0.1),
),
child: buildItem(guest, index: index),
);
}
Widget buildItem(Guest guest, {int index}) {
return GuestRow();
}
I thought that maybe Expanded causes padding problems for AnimatedList but I'm not sure.
Could you tell what is happening here?
The problem was that I set the sizeFactor
for the SizeTransition
as
animation.drive(
Tween(begin: 0.0, end: 0.1),
),
where it should have been
animation.drive(
Tween(begin: 0.0, end: 1.0), // <-- changed 0.1 to 1.0
),