How to make a Container stretch to occupy same height as row? - dart

Question

I want to achieve something like below
What I am able to achieve
Here is my code
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Row(
children: <Widget>[
Container(
color: Colors.orange,
width: 4,
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.alarm),
SizedBox(
width: 2,
),
Text(
"Starts",
style:
TextStyle(fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
studentClassesData.classStarttime,
style: TextStyle(fontFamily: "BarlowBold", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
"to",
style:
TextStyle(fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
studentClassesData.classEndtime,
style: TextStyle(fontFamily: "BarlowBold", fontSize: 12),
)
],
),
SizedBox(
height: 4,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
studentClassesData.subject,
style: TextStyle(
fontFamily: "BarlowBold", fontSize: 12, color: blue),
),
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CircleAvatar(
backgroundImage:
NetworkImage(studentClassesData.facultyImage),
child: Image.asset("images/round_only.webp"),
),
SizedBox(width: 5,),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"Faculty",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
),
SizedBox(
height: 3,
),
Text(
studentClassesData.faculty,
style: TextStyle(fontFamily: "BarlowBold"),
),
],
)
],
),
SizedBox(
height: 4,
),
Row(
children: <Widget>[
Icon(Icons.business),
Column(
children: <Widget>[
Text(
"Floor/Room",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
SizedBox(
height: 3,
),
Text(
"${studentClassesData.floor}/${studentClassesData.room}",
style: TextStyle(fontFamily: "BarlowBold"),
),
],
)
],
),
],
),
)
],
));
I am not able to achieve the view which has a yellowish colour at the start to occupy same height as the Row. As you can see in the above code I have used a Container and I know I can give a height to the container but I don't want to give a fixed height to the container as the height may change depending on data coming from the api..

Answer 1

You need to use - IntrinsicHeight to get what you want.
working Code(with Dummy Values):
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
clipBehavior: Clip.antiAlias,
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.orange,
width: 4,
),
SizedBox(width: 5.0,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.alarm),
SizedBox(
width: 2,
),
Text(
"Starts",
style: TextStyle(
fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
'11:30 AM',
style:
TextStyle(fontFamily: "BarlowBold", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
"to",
style: TextStyle(
fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
'1:30 PM',
style:
TextStyle(fontFamily: "BarlowBold", fontSize: 12),
)
],
),
SizedBox(
height: 4,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Design Studio 6 (Capstone)',
style: TextStyle(
fontFamily: "BarlowBold",
fontSize: 12,
color: Colors.blue),
),
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CircleAvatar(
backgroundImage:
NetworkImage('https://placeimg.com/640/480/any'),
child: Image.asset("images/round_only.webp"),
),
SizedBox(
width: 5,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"Faculty",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
),
SizedBox(
height: 3,
),
Text(
'Meenal',
style: TextStyle(fontFamily: "BarlowBold"),
),
],
)
],
),
SizedBox(
height: 4,
),
Row(
children: <Widget>[
Icon(Icons.business),
Text(
"Floor/Room",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
SizedBox(
height: 3,
),
Text(
"6th Floor: North Wing / ISDI 606",
style: TextStyle(fontFamily: "BarlowBold"),
)
],
),
],
)
],
),
)),
Output:
I don't have fonts you have used, so UI looks different than yours. But it get the job Done.

Answer 2

You can do it by wrapping your Card in a SizedBox giving it a height you want. In this case, you don't need to hard code any height to your Container, the Container will just expand to match the height of your Row. Here is simple example:
SizedBox(
height: 100,
child: Card(
color: Colors.green,
child: Row(
children: <Widget>[
Container(
color: Colors.blue,
width: 100, // no need to set any height, it will automatically fill to match row
)
],
),
),
);