Make a card big enough to fit the child text - animation

Question

I'm creating a simple card that contains a long description.
I want to set the normal height of the card to 50px and when the user clicks on it I want to expand the card to be able to fit all the content inside.
So far, to obtain my needs I wrote this:
String aLotOfText = "When Gradle resolves the compile classpath, it first resolves the runtime classpath and uses the result to determine what versions of dependencies should be added to the compile classpath. In other words, the runtime classpath determines the required version numbers for identical dependencies on downstream classpaths. Your app's runtime classpath also determines the version numbers that Gradle requires for matching dependencies in the runtime classpath for the app's test APK. The hierarchy of classpaths is described in figure 1.";
bool cardExpanded = false;
InkWell(
onTap: () {
expandCard();
},
child: AnimatedContainer(
height: cardExpanded ? null : 50,
duration: Duration(milliseconds: 200),
child: Card(
child: Text(aLotOfText),
),
)
)
expandCard() {
setState(() {
cardExpanded = !cardExpanded;
});
}
As you can see on the line height: cardExpanded ? null : 50, when cardExpanded is true I didn't specify the height, so in this way I'm able to expand the card to the right height to contain the text.
But with this little hack I've completely lost the animation and as long as this card would go in a listview with 20 or more other cards, the opening and closing makes the list to jump up and down.
I'm sure that there is a way to expand the card to the right height keeping also the animation.
I would also like to specify that the one above is just an example, in my card, there will be images and buttons as well.
In addition, when the card is opened with a button, I could add some text, so the card has to expand as well when it is opened.
That's why I cannot specify a height.
EDIT
With height: cardExpanded ? null : 50 I get what I want, so, the card grows big enough to fit the content, but as you can see there is no animation there
Instead if I provide a value like height: cardExpanded ? 100 : 50, I get the animation, but obviously the card grows until it gets to 100 pixels and it dosen't show all the content.
The result that I would like to obtain is what there is in the first example plus the animation.
Thankyou

Answer 1

You could set two variables:
height = MediaQuery.of(context).size.height * 0.8; //the percentage you want the card to grow
width = MediaQuery.of(context).size.width * 0.8;
So when expanded is true, the container grows.
height: cardExpanded ? height : 50,
width: cardExpanded ? width : 50,
Also, to specify how the animation will perform, you have a property that can make the animation look smoother.
curve: Curves.bounceInOut,
or you could try using a widget like expanded to adjust.