Animated Listview-item to show more information

Question

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?

score 0 · Answer 1 · answered Jul 02 '22 at 06:27

0

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

answered Jul 02 '22 at 06:27

Colin

211
2
8

Thanks for your help but I want to build customized list tiles, which is not possible with the tiles from flutter. Im searching for something like this, but not with the animation to the top: https://github.com/loopeer/CardStackView/blob/master/screenshot/screenshot1.gif – beax07 Jul 02 '22 at 08:19
One thing I've noticed is that you are using a function to build your card. I don't know if a function can be stateful. I would use a StatefulWidget class for this. Maybe check out the AnimatedContainer example in the docs. https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html – Colin Jul 02 '22 at 09:01
So the AnimatedContainer have to be in a stateful function if I understand the docs correctly. I'm going to test it later. I'm using a function to build the card because later the data is downloaded from firebase and therefor I have to iterate through the data. I think it's easier to outsource the process in an own function. What do you think? – beax07 Jul 02 '22 at 11:35
You should prefer using classes over functions for UI because they provide some performance optimizations, they are less error prone and more reusable. Another best practice is to split logic and UI. A very clean way is to use a state management solution like Bloc or Provider for your app architecture. – Colin Jul 02 '22 at 14:50

Animated Listview-item to show more information

1 Answers1