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,
),
)
]))
]));
}
First declare a variable
then