How to make Expandable card?

Question

I am new to flutter and I want to make a list of cards like this.

I tried to Understand the original Project but I am not able to figure out.

I just want to make an expandable card without the background gif/video effect

Thanks...

Answer 1

Here is an example of what I said in the comments on your question:

It contains a Card with a Container which contains a height, the height is updated when the Card is tapped because of the InkWell's onTap event, the onTap calls the setState() function to update the widgets, with the new height of the Card.

   class MyApp extends StatefulWidget {
      double oldheight = 100.0;
      double newheight = 200.0;
      double height = 200.0;

      @override
      Widget build(BuildContext context) {
        final title = 'Basic List';

        return MaterialApp(
          title: title,
          home: Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: ListView(
              children: <Widget>[
                InkWell(
                  onTap: () {
                    setState(() {
                      if (height == oldheight) {
                        height = newheight;
                      }
                      else{
                        height = oldheight;
                      }
                    });
                  },
                  child: Card(
                    child:Container(height: height,),
                  ),
                ),
              ],
            ),
          ),
        );
      }

This isn't tested yet...

Answer 2

If you don't want to use ExpansionTile then one of the easiest way of doing it is following

class ExpandableCardContainer extends StatefulWidget {
  final bool isExpanded;
  final Widget collapsedChild;
  final Widget expandedChild;

  const ExpandableCardContainer(
      {Key key, this.isExpanded, this.collapsedChild, this.expandedChild})
      : super(key: key);

  @override
  _ExpandableCardContainerState createState() =>
      _ExpandableCardContainerState();
}

class _ExpandableCardContainerState extends State<ExpandableCardContainer> {
  @override
  Widget build(BuildContext context) {
    return new AnimatedContainer(
      duration: new Duration(milliseconds: 200),
      curve: Curves.easeInOut,
      child: widget.isExpanded ? widget.expandedChild : widget.collapsedChild,
    );
  }
}

Use this widget and pass the collapsed child and expanded child and change the value of isExpanded on click of button or text.

 ExpandableCardContainer(
      expandedChild: createExpandedColumn(context),
      collapsedChild: createCollapsedColumn(context),
      isExpanded: widget.model.isExpanded,
 )

Now change the value of isExpanded on click of icon/text

GestureDetector(
  child: Icon(
    widget.model.isExpanded
        ? EvaIcons.chevronDownOutline
        : EvaIcons.chevronUpOutline,
    color: Colors.grey,
    size: 20,
  ),
  onTap: () {
    setState(() {
      widget.model.isExpanded =
          !widget.model.isExpanded;
    });
  },
 ),
)

Answer 3

try to add an ExpansionTile inside a Card, this will expand the Card when you expand the ExpansionTile

Card(
  child: Padding(
   padding: EdgeInsets.only(
      top: 36.0, left: 6.0, right: 6.0, bottom: 6.0),
      child: ExpansionTile(
      title: Text('Birth of Universe'),
        children: <Widget>[
         Text('Big Bang'),
         Text('Birth of the Sun'),
         Text('Earth is Born'),
      ],
    ),
  ),
)