Flutter layout: how to expand widget vertically - flutter

Question

I am struggling to understand how to layout my widget so that they are occupying the entire yellow space. More specifically I would like that the "hero' and the "boss" widget expand to occupy the available space on screen (excluding the keyboard)
My current code achieve the following result
I would like to get the following result below
Here is my code. I have used resizeToAvoidBottomInset: true to ensure the widget is resized with the keyboard popping up
Widget build(BuildContext context) {
return Container(
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: kColorPrimary,
appBar: AppBar(
backgroundColor: kColorPrimaryLight,
title: Text('Time to Spell'),
),
body: ModalProgressHUD(
inAsyncCall: showSpinner,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Container(
height: 100,
color: Colors.amberAccent,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Text(
result,
textAlign: TextAlign.center,
style: kTitleTextStyle,
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
child: Text(
'Timer: 2:00',
textAlign: TextAlign.center,
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
height: 279,
color: Colors.purple,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Hero',
textAlign: TextAlign.center,
),
),
),
),
),
Expanded(
child: Container(
height: 279,
color: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Boss',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
],
),
),
),
],
),
),
))));
}

Answer 1

Try this. I have added comments as well. Feel free to comment if anything is not clear.
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.amberAccent,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Text(
"Click start",
textAlign: TextAlign.center,
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
child: Text(
'Timer: 2:00',
textAlign: TextAlign.center,
),
),
),
],
),
Expanded(
child: Row(
children: <Widget>[
//child 1 of row takes half of the space
Expanded(
child: Column(
children: <Widget>[
//expanding the container to the bottom
Expanded(
child: Container(
//maximizing the width of the container
width: double.infinity,
color: Colors.purple,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Hero',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
//child 2 of row takes half of the space
Expanded(
child: Column(
children: <Widget>[
//expanding the container to the bottom
Expanded(
child: Container(
//maximizing the width of the container
width: double.infinity,
color: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Boss',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
],
),
),
],
),
),
);
}