SizedOverflowBox's size is not working as expected

So, here is how SizedOverflowBox works

these are the widget that SizedOverflowBox effects

1. parent
2. SizedOverflowBox
3. child

let parent widget has x width and y height. SizedOverflowBox has ox width and oy height in its size parameter. then the child widget will be given following constraints.

maxWidth = ox + ((x - ox)/2) maxHeight = oy + ((y - oy/2)/2)

then child can't be greater than maxWidth and maxHeight even if we try provide greater hight and width values explicitly. But it can be smaller than maxWidth and maxHeight.

And the parent will have the following constraints

minWidth = SizedOverflowBox.width minHeight = SizedOverflowBox.height maxWidth = parent.width maxHeight = parent.height

And, parent will think its child tree has maximum size of ox, oy. As these are the dimensions of SizedOverflowBox provided in its size parameter.

There is more to it.

If parent has size smaller than the size of child of SizedOverflowBox then the child of SizedOverflowBox won't be able to overflow. And if parent has size < SizedOverflowBox.size then SizedOverflowBox will use parent.size as its own size and pass the same constraints to the child as

maxwidth = parent.size maxHeight = parent.size

As per described from official documentation:

"A widget that is a specific size but passes its original constraints through to its child, which may then overflow."

child: Container(
    color: Colors.orangeAccent,
    child: SizedOverflowBox(
      size: const Size(
        80.0,
        100.0,
      ),
      alignment: AlignmentDirectional.bottomStart,
      child: Container(
        height: 50.0,
        width: 150.0,
        color: Colors.blue,
      ),
    ),
  ),

This would produce this:

Reference for my description: https://flutteragency.com/sizedoverflowbox-widget/

I think it is because the default alignment of SizedOverflowBox is Alignment.center, according to the Size(100,100) area.

const SizedOverflowBox({
  Key? key,
  required this.size,
  this.alignment = Alignment.center,
  Widget? child,
}) : assert(size != null),
   assert(alignment != null),
   super(key: key, child: child);

The Size of the blue area is unlimited so it show as large as the parent widget Scaffold

So, it draw a blue rectangle as large as Scaffold and place in the center of Size(100, 100) area. (you can try to set alignment to Alignment.topLeft and see the whole rectangle maybe you want)

The SizedOverFlow box has a specific size but it does not override the size of the parent, rather it sizes its parent widget and lets its child widget overflow the constraints.

Widget build(BuildContext context) {
  return Scaffold(
    body: SizedOverflowBox(
      size: Size(100, 100),
      child: Container(color: Colors.blue),
    ),
  );
} 

Size(100, 100), get assigned to the parent widget. So I wrap the SizedOverflowBox widget with a Container widget.

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.green,
          child: SizedOverflowBox(
            size: Size(100, 100),
            child: Container(
              color: Colors.blue,
              height: 50,
              width: 300,
            ),
          ),
        ),
      ),
    );
  }