I want to add an animation to my ListView items. Therefor I wrapped them in an AnimatedController and made the height dynamic to show more information after the user taped on the item.

Here is my code:

Widget _buildCard(
  String logo, Color logoColor, Color cardColor, Color prevColor) {
bool selected = false;
return SliverStickyHeader(
  header: GestureDetector(
    onTap: (() {
      setState(() {
        print("taped");
        selected = !selected;
      });
    }),
    child: Stack(
      children: <Widget>[
        Container(
          height: 16,
          color: prevColor,
        ),
        AnimatedContainer(
          duration: const Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          height: selected ? 130 : 60,
          decoration: BoxDecoration(
              color: selected ? Colors.amber : cardColor,
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(16),
                  topRight: Radius.circular(16))),
          padding: const EdgeInsets.symmetric(horizontal: 16),
          alignment: Alignment.bottomLeft,
          child: Text(
            logo,
            style: TextStyle(color: logoColor, fontWeight: FontWeight.bold),
          ),
        ),
      ],
    ),
  ),
  sliver: SliverToBoxAdapter(
    child: Container(
      height: 20,
      color: cardColor,
    ),
  ),
);
}

Unfortunately the animation did not execute, does anybody know why? Did I forget anything while implementing the AnimationController to my List?


Solution 1: Colin

You don't need to reinvent the wheel. There already is a Widget for this. It's called ExpansionTile.