card view and layout in flutter - flutter

Question

i am trying to accomplish layout where components are overlay in flutter but im having problem.
here is the code that i have so far
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)),
)
],
)
)
],
),
)
],
)
);
}
}
when you run the code, you will notice that the card view shrink and doesnt overlay the container. i am looking to do the same as the image below:
notice how the card view with title of Summary is overlay the blue background and then there are other card views below summary card view.
i am getting the following from my code. the card view doesnt overlay like the image above. can someone help? thanks in advance
NOTE: it will be great if anyone can make my card view look like the one in Summary card view in the image above. the one in my code i copied from somewebiste with the goal of making it look like the image above

Answer 1

Remove following from your Container
constraints: new BoxConstraints.expand(
height: 200.0,
)
Add mainAxisSize: MainAxisSize.min to your Column.
new Column(
mainAxisSize: MainAxisSize.min, // add this
crossAxisAlignment: CrossAxisAlignment.center,
children: ...
)
Full solution:
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)),
)
],
))
],
),
)
],
),
);
}
}