Allowing a widget to overflow to another widget

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
           


        

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: [
    new Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        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,
      ),
    )
  ],
);