Search code examples
listflutterdartflutter-animatedlist

AnimatedList in Flutter is displaying crushed elements


I'm trying to display an AnimatedList of ExpansionTiles/ListTiles in Flutter, and this is what happens: enter image description here

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?


Solution

  • 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
      ),