How to make animated container have dynamic height-CodePudding

I'm trying to create a expand-able container that have a specific height of 150 when it shrink and only show maximal 2 line of text.

But when the user click on the container it will expand to height of depending on the text if the text from the database is 10 line the height have to be 10 line but when the max text is 20 the height need to adjust to 20 line.

Can I achieve it using animatedContainer or animatedSize ?

CodePudding user response：

Yes you can use an animated container..

bool widgetExpanded = false;

InkWell
(
 onTap :(){
    setState((){
      widgetExpanded = !widgetExpanded;
    });
  }
child : AnimatedContainer(
  height : widgetExpanded ? 300:150, //<-- optional. Only if you wish to add height
  duration: Duration(milliseconds: 500),
  child: Text("Some big text here", style: TextStyle(
  maxLines: widgetExpanded? null: 2,
  overflow: TextOverflow.ellipsis,
 ))
)
)

Also please take a look at expansion tile https://api.flutter.dev/flutter/material/ExpansionTile-class.html

CodePudding user response：

Use ExpansionTile to create that animation, it is expanded to your text or any widget as you like.