Search code examples
flutterflutter-layout

Flutter - Size of Transform.scale widget does not change when its child is scaled


I have a widget A that I want to scale (pixel perfect). Depending on display width of the device, the size of A should be either increased or decreased. I tried the Transform.scale widget to change the size of the A. This works well but the size of the Transform.scale widget never changes. It always matches the original size of A (without scaling). Is there any way to force Transform.scale that it always adopts the size of its child? Or is there an alternative approach?

You can find an image here that shows the current and the required situation

EDIT: Widget A and its children should shrink/grow uniformly. The ratios between them should not change.

enter image description here

Here is the code I currently tried

_buildWidgetA(scalingFactor) {
  return Transform.scale(
    scale: scalingFactor,
    child: A(),
  );
}

Solution

  • Thanks to the input from @LOfG I learned that you cannot achieve the desired behavior with Transform.scale widget. Unfortunately, this widget does not change its size to match the dimensions of the scaled child but will always keep the width and height of the original, unscaled child.

    I found another widget, FittedBox, with which I got the desired behavior. When using FittedBox, you do not define a scaling factor as you would do with Transform.scale. You rather put FittedBox inside a SizedBox and define its width or height or both. The child of FittedBox is then scaled to match the parent SizedBox.

    https://api.flutter.dev/flutter/widgets/FittedBox-class.html

    _buildWidgetA(width, height) {
        return SizedBox(
            width: width,
            height: height,
            child: FittedBox(
                child: A(),
            ),
        );
    }