Flutter card layout and design - flutter

Question

So I'm trying to create an expandable card. But the problem is, I don't even know how to start with the design.
So I'm trying to achieve this output
And this is my current progress
I tried putting two containers in a column, but it just doesn't look right.
Can someone please help me out. I need to achieve the top part of the card.
This is the code for my current progress
Widget buildTabCards() {
return Container(
padding: EdgeInsets.only(
top: 10.0,
left: 10,
right: 10,
),
child: Column(children: [
Card(
elevation: 5.0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.only(
top: 7,
bottom: 10,
),
child: Column(
children: <Widget>[
buildCardDateandTime(),
buildCardAvatar(),
],
),
),
),
Widget buildCardDateandTime() {
return Container(
child: Row(
children: [
Padding(
padding: EdgeInsets.only(
left: 15,
right: 5,
top: 2,
),
child: Icon(
MdiIcons.clockOutline,
size: 22,
color: AppColors.blue,
),
),
Text(
"12 June, 2021, 8:00 AM",
style: TextStyle(
fontFamily: "Poppins",
color: Colors.black87,
letterSpacing: 0.3,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
SizedBox(width: 5),
Padding(padding: EdgeInsets.only(left: 50)),
IconButton(
icon: Icon(
MdiIcons.fromString('dots-vertical'),
size: 30,
color: AppColors.blue,
),
onPressed: () {
Navigator.of(context).pop();
},
)
],
),
);
}
Widget buildCardAvatar() {
return Padding(
padding: EdgeInsets.only(
left: 25,
top: 5,
bottom: 10,
),
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Container(
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
child: Text(
"JS",
style: TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
width: 5.0,
),
Padding(padding: EdgeInsets.only(left: 10)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"John Renzo",
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
fontWeight: FontWeight.w500,
),
),
Text(
"Sangalang",
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
fontWeight: FontWeight.w500,
),
)
]))
]));
}

Answer 1

First declare a variable
bool extended = false;
then
Padding(
padding: const EdgeInsets.only(left: 12.0, right: 12.0, top: 9.0, bottom: 9.0),
child: Container(
width: MediaQuery.of(context).size.width,
child: InkWell(
onTap: () {
setState(() {
if (extended == null || !extended)
extended = true;
else
extended = false;
});
},
enableFeedback: false,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Center(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Row(
children: <Widget>[
Expanded(
child: Text(
'Text',
style: TextStyle(fontSize: 16.0),
),
),
Icon(
extended ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
size: 26,
color: Colors.grey,
)
],
),
SizedBox(
height: 10.0,
),
extended
? Container(
height: 100,
)
: Container()
],
),
),
),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(7.0),
),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.09),
offset: Offset(0.0, -2.0),
blurRadius: 12.0,
),
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.09),
offset: Offset(0.0, 6.0),
blurRadius: 12.0,
),
],
),
),
);

Answer 2

You can use ExpansionPanel to achieve your results
List<bool> isExpanded = []; //the size/length should be equal to the size of your data list
ExpansionPanelList(children: [
//generate the panels from your data list
ExpansionPanel(
headerBuilder: (context, isExpanded) {
return _headerHere();
},
body: _bodyHere(),
isExpanded: isExpanded[0], //index of your card
canTapOnHeader: true,// to make the complete header clickable
)
],
expansionCallback: (panelIndex, expanded) {
setState(() {
isExpanded[panelIndex] = !expanded;
});
},
),