Flutter Collapsible / Expansible card - flutter

Question

I am trying to match this design
on tap the card should expand
I cannot use a card wrapping an expansion tile because the expansion tile is basically only one row, I was trying to follow this example
flutter_catalog
I googled a lot and could not find an example of what I am trying to achieve, the closest thing I could find on stackoverflow was this other question is there not in flutter a collapsible / expansible card?

Answer 1

You can absolutely use a Card wrapping an ExpansionTile. The ExpansionTile has a title property which takes a Widget so you can pass any Widget you want into it.
Messy example code, but hopefully you get the idea:
class ExpandedTile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0))),
elevation: 2,
margin: EdgeInsets.all(12.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ExpansionTile(
backgroundColor: Colors.white,
title: _buildTitle(),
trailing: SizedBox(),
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Text("Herzlich Willkommen"),
Spacer(),
Icon(Icons.check),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Text("Das Kursmenu"),
Spacer(),
Icon(Icons.check),
],
),
)
],
),
),
);
}
Widget _buildTitle() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text("MODUL 1"),
Spacer(),
Text("Mehr"),
],
),
Text("Kursubersicht"),
Row(
children: <Widget>[
Text("6 Aufgaben"),
Spacer(),
FlatButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0))),
padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
icon: Icon(Icons.play_arrow),
label: Text("Fortsetzen"),
),
],
),
],
);
}
}
produces
and when tapped