I want to layout a child using a fixed width & height. The child can be anything, like Column, Row, ListView, GridView, etc. Inside that widget, can also be anything, like Image, Text, Container, etc. The child then will be scaled down to the dimension of the device.
For example, I may have a GridView with the width of 1000 and height of 500, within a device that has width of 400.
var window = MediaQueryData.fromWindow(WidgetsBinding.instance.window);
var shortestWidth = window.size.shortestWidth;
I lay out all the contents of the child (let's say it's GridView)'s children using the assumption of 1000 x 500.
And then I scale down the width and height of the GridView.
var child = GridView(...);
var scale = shortestWidth/1000;
var scaledChild = Transform.scale(scale: scale, child: child);
return Container(width: shortestWidth, child: scaledChild);
But the problem is, it looks like the child was laid out first and constrained using the parent's width/height before it's even scaled. So the child looks like cropped somewhere, and out of bound widget (it was laid out using width = 1000 as the assumption) was laid out weird, like having very small width so e.g. Text widget wrapped content one character at each line, though it's still laid out in the correct position after scale.
How can I lay out a child's contents while ignoring parent constraint?