Text resizing based on available space

[maryx]

This issue talks about it a little: #13455 as do these StackOverflows:
https://stackoverflow.com/questions/47665083/how-do-i-auto-scale-down-a-font-in-a-text-widget-to-fit-the-max-number-of-lines
https://stackoverflow.com/questions/50751226/how-to-dynamically-resize-text-in-flutter

Here's the specific constraints I have (that others might too):

1. I want to allocate a "maxSize" box of space for my text, e.g. 60 x 100; the text should never take up more than this space but can take up less.
2. The text is sized 30. If it overflows the space, i.e. hits three lines, scaleDown.
3. If the text is really short (e.g. 1 character), the box should be instead 30 x 100 instead of 50 x 100.

Things I've tried:
FittedBox
#13455 lets you adjust the text size by doing:

FittedBox(
  child: Text('short or long text'),
  fit: BoxFit.scaleDown,
);

but the text is always 1 line. This means the text is really small. So this only satisfies 1) if my "maxSize" is defined to be 1 line of text.

FittedBox with SizedBox
The first StackOverflow link suggests putting the FittedBox in a SizedBox, e.g.:

SizedBox(
  height: 60.0,
  width: 100.0,
  FittedBox(
    child: Text('short or long text'),
    fit: BoxFit.scaleDown,
  );

This satisfies 1) and 2) but if my text is short, I have all this extra space below my text that is not used. This isn't great from a UI perspective when I have widgets below this Text.

FittedBox with BoxConstraints
I tried replacing the SizedBox with BoxConstraints.

BoxConstraints(
  maxHeight: 60.0,
  maxWidth: 100.0,
  FittedBox(
    child: Text('short or long text'),
    fit: BoxFit.scaleDown,
  );

I think this one also resulted in 1-line text all the time.

Manually calculating font sizes based on String length
This is what I'm doing now. It'd be great if there were a Flutter widget that would satisfy the three constraints above though.

Ideas:

• SizedBox could have a property that is "try-to-be-small-if-possible".
• BoxConstraints can try to support multiple lines of text

[HansMuller]

You can measure the size of text with TextPainter, and render it with a CustomPaint (via a CustomPainter). The CustomPainter can scale its Canvas to ensure that the text will fit.

To create a widget that's one of two sizes you could use a LayoutBuilder. The LayoutBuilder's size will match the size of the widget it builds. The layout builder could create a TextPainter (or use the one created by its stateful parent widget), and use it to decide on the overall size (so return a widget wrapped in a SizedBox) and the scale factor. The text painter and scale factor would be handed off to the CustomPaint/CustomPainter.

[simc]

Edit: I created a package which solves this problem auto_size_text.

[goderbauer]

Looks like we have a pretty good packages that accomplishes this.

[sravanpabolu]

Any package for text resizing ?

[omidraha]

Any package for text resizing ?

There is auto_size_text but have some issues.

[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.