如何修复布局？

Question

我的代码混乱不清：

@override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        // The containers in the background
        new Column(
          children: <Widget>[
            new Container(
              height: MediaQuery.of(context).size.height * .65,
              color: const Color.fromRGBO(132, 162, 175, 1.0),
              child: new Column(
                children: [
                  new Image.asset('assets/app_logo_transparent_bg.png',
                  height: 100.0,
                  width: 100.0,
                  fit: BoxFit.fill,
                  ),
                ],
              ),
            ),
            new Container(
              height: MediaQuery.of(context).size.height * .35,
              color: Colors.white,
            )
          ],
        ),
        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .58,
              right: 20.0,
              left: 20.0),
          child: new Container(
            height: 200.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 4.0,
            ),
          ),
        )
      ],
    );
  }  

结果是这样的：
 https://www.dropbox.com/s/bxsormtht173t9d/Screenshot_20181103-204135.png?dl=0

但我尝试实现这一目标：
https://www.dropbox.com/s/pgqlcuw28r19jfi/Screenshot_20181103-204559.png?dl=0

那么如何删除这个奇怪的黑匣子？

Answer 1

您需要拉伸Column，在CrossAxisAlignment.stretch的{​​{1}}字段中使用crossAxisAlignment参数。

Column