Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Expandable card?

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

enter image description here

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...

like image 571
Puneet Kumar Avatar asked Mar 04 '19 15:03

Puneet Kumar


People also ask

How do you make cards expandable in flutter?

The expansion_card package is used to easily implement Expandable cards in Flutter. Images and GIFs can also be used as a background to enhance the beauty of the card, which would expand when the card is expanded.

What is card in flutter?

A card is a sheet used to represent the information related to each other, such as an album, a geographical location, contact details, etc. A card in Flutter is in rounded corner shape and has a shadow. We mainly used it to store the content and action of a single object.


3 Answers

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'),
      ],
    ),
  ),
)
like image 157
Sami Kanafani Avatar answered Oct 18 '22 23:10

Sami Kanafani


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;
    });
  },
 ),
)
like image 22
Sanjay Sharma Avatar answered Oct 18 '22 22:10

Sanjay Sharma


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...

like image 2
FoxyError Avatar answered Oct 18 '22 21:10

FoxyError