Flutter 颤振布局：如何垂直扩展小部件

我正在努力理解如何布局我的小部件，让它们占据整个黄色空间。更具体地说，我希望“hero”和“boss”小部件能够扩展以占用屏幕上的可用空间（不包括键盘）

我当前的代码实现了以下结果

我想得到以下结果

这是我的代码。我使用了

resizeToAvoidBottomInset:true

来确保小部件随着键盘弹出而调整大小

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

小部件构建（构建上下文）{
返回容器(
孩子：脚手架(
resizeToAvoidBottomInset:true，
背景颜色：kColorPrimary，
appBar:appBar(
背景颜色：kColorPrimaryLight，
标题：文本（“拼写时间”），
),
正文：ModalProgressHUD(
inAsyncCall:showSpinner，
孩子：填充(
填充：常数边集全部（8.0），
儿童：安全区(
子：列(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
扩大(
子：容器(
身高：100，
颜色：Colors.amberAccent，
子：列(
儿童：[
划船(
儿童：[
扩大(
弹性：2，
子：容器(
颜色：颜色，蓝色，
子：文本(
结果,，
textAlign:textAlign.center，
风格：kTitleTextStyle，
),
),
),
扩大(
弹性：1，
子：容器(
颜色：颜色，蓝色，
子：文本(
“计时器：2:00”，
textAlign:textAlign.center，
),
),
),
],
),
划船(
儿童：[
扩大(
子：容器(
身高：279，
颜色：颜色，紫色，
孩子：填充(
填充：常数边集全部（8.0），
子：容器(
颜色：颜色，白色，
子：文本(
“英雄”，
textAlign:textAlign.center，
),
),
),
),
),
扩大(
子：容器(
身高：279，
颜色：Colors.greenAccent，
孩子：填充(
填充：常数边集全部（8.0），
子：容器(
颜色：颜色，白色，
子：文本(
“老板”，
textAlign:textAlign.center，
),
),
),
),
),
],
),
],
),
),
),
],
),
),
))));
}

试试这个。我也添加了评论。如果有什么不清楚的地方，请随时发表评论

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

@覆盖
小部件构建（构建上下文）{
返回安全区(
子：容器(
颜色：Colors.amberAccent，
子：列(
儿童：[
划船(
儿童：[
扩大(
弹性：2，
子：容器(
颜色：颜色，蓝色，
子：文本(
“单击开始”，
textAlign:textAlign.center，
),
),
),
扩大(
弹性：1，
子：容器(
颜色：颜色，蓝色，
子：文本(
“计时器：2:00”，
textAlign:textAlign.center，
),
),
),
],
),
扩大(
孩子：排(
儿童