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...
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.
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.
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'),
],
),
),
)
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;
});
},
),
)
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With