Allowing a widget to overflow to another widget - flutter

Question

I was trying to achieve an effect of allowing a widget to overflow to another widget as seen here
The code I've this far is this:
#override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return new Column(children: <Widget>[
new Container(
color: Colors.blue,
height: screenSize.height / 2,
width: screenSize.width,
child: new Center(
child: new Container(
margin: const EdgeInsets.only(top: 320.0),
color: Colors.red,
height: 40.0,
width: 40.0,
),
))
]);
}
This resulted in the following, the square is cut off by the container.Is there another approach to this?

Answer 1

Generally speaking you should never overflow in flutter.
If you want a specific layout, you'll need to explicitly separate the "overflowing" widget on a different layer.
One solution for that is Stack widget, which allow widgets to be above each others.
In the end to achieve this :
the flutter code would be
new Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Container(
color: Colors.blue,
),
),
new Expanded(
child: new Container(
color: Colors.white,
),
),
],
),
new Center(
child: new Container(
color: Colors.red,
height: 40.0,
width: 40.0,
),
)
],
);