SizedBox ignores the scaling factor on a child Transform

[mpcomplete]

Try this sample:

  runApp(new Align(
    alignment: FractionalOffset.topCenter,
    child: new SizedBox(
      height: 50.0,
      child: new Transform(
        transform: new Matrix4.identity()
                   ..scale(1.0, 0.5),
        child: new Column(
          children: <Widget>[
            new Flexible(flex: null, child: new Container(decoration: new BoxDecoration(backgroundColor: Colors.green[500]), height: 2.0*20.0)),
            new Flexible(flex: null, child: new Container(decoration: new BoxDecoration(backgroundColor: Colors.white), height: 2.0*30.0)),
          ]
        )
      )
    )
  ));

The Transform has a 100px high child, which it scales to 50px high. This should fit fine inside the SizedBox, but the SizedBox paints an angry red overflow indicator on the bottom half of its child. If the SizedBox instead has an untransformed 50px child, everything is fine. It seems the SizedBox applies its constraints to the child before the transform is applied.

[Hixie]

The red is coming from the Column. It only has 50.0 pixels to play with (max height constraint coming from the parent SizedBox) but you've put 100 pixels of stuff inside it (two children, one 40 pixels high and one 60 pixels high).

Transform doesn't change the constraints, it just passes them straight from the parent to the child. Consider a non-affine perspective transform combined with an arbitrary rotation and a shear... what would you do to the box constraints if you were to manipulate them in some way?

[Hixie]

The way to debug this, by the way, is debugDumpRenderTree

[mpcomplete]

Transform doesn't change the constraints

Ah, that's probably the cause of #5850 and maybe #5671 .

I understand the technical reasons for it, but this still seems wrong to me. Is there a workaround? I want to put WxH pixels of stuff inside a Transform, and shrink it down to fit in its container. Since that container is going to be smaller than WxH, I'm going to get the red overflow paint.

[Hixie]

I think you want either this widget: https://github.com/flutter/game/blob/master/lib/render_coordinate_system.dart
Or this widget: #5830

Both are easy to write if you want to write them.

Container will not show red overflow paint. Only Row and Column do that.

[mpcomplete]

Presumably #5830 will be built using Transform, so it will need to solve this problem too.

Is there some way I can wrap the Column to tell it that it has more space than it thinks? Wrapping it in a Container or SizedBox with a manual height does nothing (presumably because their ancestor has a smaller height). I need to position 2 widgets. Maybe a Stack instead of Column?

[Hixie]

I would imagine #5380 would be built as its own RenderObject, a peer to Transform rather than built on it, since it needs to read the child size and so forth.

I don't really understand what you're trying to do. Can you elaborate on your larger goal?

[mpcomplete]

I'm trying to get the Pesto logo to smoothly animate between image and image+text. My approach involves drawing the image+text as separate components, which requires scaling them together. See #5890 for a working implementation - where I ended up using Stack instead of Column.

[mpcomplete]

Sounds like it's WAI that Transform does not affect child sizes.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.