Flutter widget second row consume remaining space - flutter

Question

I am fairly new to flutter, many things I don't understand yet. I have tried many things and I can't get what I want yet. Any suggestions would be helpful.
Widget build(BuildContext context) {
return Column(children: [
Expanded(
child: Container(
// make the full container the amber color
color: Colors.amber[600],
child: Column(children: [
Row(children: [
Expanded(
child: Text(
windowName,
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 24,
fontWeight: FontWeight.bold),
),
),
IconButton(
onPressed: onCurrentDelete,
icon: Icon(Icons.delete_outline, size: 32)),
]),
//IntrinsicHeight(
// child:
Row(
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
// make the left container blue
color: Colors.blue[600],
//constraints: BoxConstraints.expand(),
//decoration: BoxDecoration(
// border: Border.all(
// width: 2,
//)),
child: Text(
startTime,
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 16,
fontWeight: FontWeight.normal),
)),
),
Expanded(
child: Container(
// make the right container green
color: Colors.green[600],
//decoration: BoxDecoration(
// border: Border.all(
// width: 2,
//)),
child: Text(
endTime,
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 16,
fontWeight: FontWeight.normal),
)),
)
],
),
//),
]),
),
)
]);
What I want is the two containers in the last row to take up the remaining space. I have used color attribute to show the size of specific widgets.
The blue and green containers need to fill the to the bottom of the amber section.
I have tried many alternatives and each time the widget generates a fault when it is rendered.

Answer 1

I hope this is what you are looking for:
Image
Code:
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(children: [
Expanded(
child: Container(
// make the full container the amber color
color: Colors.amber[600],
child: Column(children: [
Row(children: [
Expanded(
child: Text(
"windowName",
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 24,
fontWeight: FontWeight.bold),
),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.delete_outline, size: 32)),
]),
//IntrinsicHeight(
// child:
Row(
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
// make the left container blue
color: Colors.blue[600],
//constraints: BoxConstraints.expand(),
//decoration: BoxDecoration(
// border: Border.all(
// width: 2,
//)),
child: Text(
"startTime",
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 16,
fontWeight: FontWeight.normal),
)),
SizedBox(
width: MediaQuery.of(context).size.width * 0.4,
),
Container(
// make the right container green
color: Colors.green[600],
//decoration: BoxDecoration(
// border: Border.all(
// width: 2,
//)),
child: Text(
"endTime",
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 16,
fontWeight: FontWeight.normal),
))
],
),
//),
]),
),
)
]),
),
);
}

Answer 2

I added height (300) to green and blue containers. and it works fine.
code:
Column(children: [
Expanded(
child: Container(
// make the full container the amber color
color: Colors.amber[600],
child: Column(mainAxisSize: MainAxisSize.max, children: [
Row(children: [
Expanded(
child: Text(
'windowName',
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 24,
fontWeight: FontWeight.bold),
),
),
IconButton(
onPressed: () {}, icon: Icon(Icons.delete_outline, size: 32)),
]),
//IntrinsicHeight(
// child:
Row(
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
height: 300,
// make the left container blue
color: Colors.blue[600],
//constraints: BoxConstraints.expand(),
//decoration: BoxDecoration(
// border: Border.all(
// width: 2,
//)),
child: Text(
'startTime',
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 16,
fontWeight: FontWeight.normal),
)),
),
Expanded(
child: Container(
height: 300,
// make the right container green
color: Colors.green[600],
//decoration: BoxDecoration(
// border: Border.all(
// width: 2,
//)),
child: Text(
'endTime',
style: TextStyle(
backgroundColor: Colors.blueGrey[200],
fontSize: 16,
fontWeight: FontWeight.normal),
)),
)
],
),
//),
]),
),
)
])