Flutter layout: how to expand widget vertically

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,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }