Flutter 颤振中的卡片视图和布局

我试图完成布局，其中组件叠加在颤振，但我有问题

这是我目前掌握的代码

import 'package:flutter/material.dart';

class FirstFragment extends StatelessWidget {

  _getSizes() {
  }

  _getPositions(){
  }

  @override
  Widget build(BuildContext context) {

    return new Container(
    constraints: new BoxConstraints.expand(
    height: 200.0,
    ),
    padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
    decoration: new BoxDecoration(
    color: Colors.blue,
    ),
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      textDirection: TextDirection.rtl,
      children: [
        Text(
          '0.00',
          style: TextStyle(
              color: Colors.white,
              fontSize: 50.0,
              fontWeight: FontWeight.bold

          ),
        ),
        Text(
          'Current Balance',
          style: TextStyle(
              color: Colors.white,
              fontSize: 26.0,
              fontWeight: FontWeight.bold
          ),
        ),
      new Card(
        child: new Column(
          children: <Widget>[
            new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
            new Padding(
                padding: new EdgeInsets.all(7.0),
                child: new Row(
                  children: <Widget>[
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Icon(Icons.thumb_up),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Icon(Icons.comment),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
                    )

                  ],
                )
            )
          ],
        ),
      )
      ],
    )

    );
  }

}

当您运行代码时，您会注意到卡片视图会收缩，并且不会覆盖容器。我希望做与下图相同的事情：

请注意，标题为Summary的卡片视图是如何覆盖蓝色背景的，然后Summary card view下面还有其他卡片视图

我从我的代码中得到以下信息。卡片视图与上图不同。有人能帮忙吗？提前谢谢

注意：如果有人能让我的卡片视图看起来像上图中的摘要卡片视图，那就太好了。我从somewebiste复制的代码中的一个，目的是使它看起来像上面的图片

---

从容器中删除以下内容

将mainAxisSize:mainAxisSize.min添加到列中

完整解决方案：

class FirstFragment extends StatelessWidget {
  _getSizes() {}

  _getPositions() {}

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
      decoration: new BoxDecoration(color: Colors.blue),
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            '0.00',
            style: TextStyle(color: Colors.white, fontSize: 50.0, fontWeight: FontWeight.bold),
          ),
          Text(
            'Current Balance',
            style: TextStyle(color: Colors.white, fontSize: 26.0, fontWeight: FontWeight.bold),
          ),
          new Card(
            child: new Column(
              children: <Widget>[
                new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
                new Padding(
                    padding: new EdgeInsets.all(7.0),
                    child: new Row(
                      children: <Widget>[
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Icon(Icons.thumb_up),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Text(
                            'Like',
                            style: new TextStyle(fontSize: 18.0),
                          ),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Icon(Icons.comment),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Text('Comments', style: new TextStyle(fontSize: 18.0)),
                        )
                      ],
                    ))
              ],
            ),
          )
        ],
      ),
    );
  }
}

---

谢谢你的解决方案。但是，卡片视图不会覆盖在蓝色背景上。卡片视图位于蓝色内。看上面的第一张图片。摘要卡视图位于蓝色背景和白色背景之间。我也想这么做。好了，明白了，你需要用堆栈来做这个。

new Column(
  mainAxisSize: MainAxisSize.min, // add this
  crossAxisAlignment: CrossAxisAlignment.center,
  children: ...
)

class FirstFragment extends StatelessWidget {
  _getSizes() {}

  _getPositions() {}

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
      decoration: new BoxDecoration(color: Colors.blue),
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            '0.00',
            style: TextStyle(color: Colors.white, fontSize: 50.0, fontWeight: FontWeight.bold),
          ),
          Text(
            'Current Balance',
            style: TextStyle(color: Colors.white, fontSize: 26.0, fontWeight: FontWeight.bold),
          ),
          new Card(
            child: new Column(
              children: <Widget>[
                new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
                new Padding(
                    padding: new EdgeInsets.all(7.0),
                    child: new Row(
                      children: <Widget>[
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Icon(Icons.thumb_up),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Text(
                            'Like',
                            style: new TextStyle(fontSize: 18.0),
                          ),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Icon(Icons.comment),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Text('Comments', style: new TextStyle(fontSize: 18.0)),
                        )
                      ],
                    ))
              ],
            ),
          )
        ],
      ),
    );
  }
}