Flutter: Prevent wrapped text when scaling down

Issue

I have a widget: HtmlWidget('<font size="200">Some Long Sentence Alright</font>') (custom widget from https://pub.dev/packages/flutter_widget_from_html_core, but using Text('Some Long Sentence Alright', style: TextStyle(fontSize: 200)) has the same issue).

Because it's big and long, when displayed on the phone, it wraps to:

Some Long 
Sentence Alright

There are two ways to scale it down:

1. Transform.scale

Transform.scale(
  child: myWidget,
  scale: 0.5,
)

Problems with this approach:

• The text is still wrapped (maybe because it's laid out, then scaled down)
• There's "phantom" margin (see Flutter - Size of Transform.scale widget does not change when its child is scaled)

2. FittedBox

Container(
  child: FittedBox(child: myWidget),
  width: 300,
  height: 100,
)

There's only one problem with this approach: I don't know the expected width/height.

Basically, I want a widget that can scale down myWidget based on scale (like Transform.scale) but does not wrap the content (like FittedBox).

How do I do that?

Solution

The Transform widget passes its own constraints down to the Text widget, if the viewport is not wide enough for the 200px font size, it will be wrapped before scaling down on painting. See RenderTransform source code here: it extends RenderProxyBox, uses the default performLayout and only overrides paint.

Knowing that, you can implement your own RenderObject to transform both the constraints (during layout) and the canvas (during painting). I have come up with a simple implementation here. As you can see below: it works with x2, x4 and x8 the font size and there is no "phantom margin".

The most important bits are here:

  @override
  void performLayout() {
    // ...

    // adjust the constraints width before performing child layout
    final childConstraints =
        constraints.copyWith(maxWidth: constraints.maxWidth / scale);

    // ...
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // scale down during painting to compensate
    layer = context.pushTransform(/* ... */);
  }

Answered By - mrpaint