In Flutter, how to use FittedBox to resize Text inside of a Row?

Question

I have a row, with an icon at each side, and then a text with an icon in the middle:

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Icon(Icons.arrow_back),
      Expanded(child: SizedBox()),
      Icon(Icons.account_box),
      Text("Some Text Here ", maxLines: 1), // ➜ This is the text.
      Expanded(child: SizedBox()),
      Icon(Icons.arrow_forward),
    ],
  );
}

When the text gets big enough to fill the whole space, I want a FittedBox to make is smaller. So I tried this:

      FittedBox(child: Text("Some Text Here. More. More. More. More. More. More. More. More. ", maxLines: 1)), 

It doesn't work (it overflows). I believe the problem is that Row doesn't tell FittedBox the maximum size it could have. I have thought about using FittedBox with Expanded, IntrinsicWidth, UnconstrainedBox, Flexible and Align, to no avail.

How can I solve this?

Update: I wrote an article which would have helped me solve this problem: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2

Answer 1

For what I understand you need to fit the text inside of the row, according to text length.

Working Code:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.arrow_back),
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.account_box),
          Flexible(
            child: FittedBox(
              fit: BoxFit.scaleDown,
              child: Text(
                "  Text HereSome Text Here Text HereSomext HereSome TText HereSome Text HereSome Text HereSome Text HereSome Text HereSome TText HereSome Text HereSome Text HereSome",
                maxLines: 1,
              ),
            ),
          )
        ],
      ),
    ),
    Icon(Icons.arrow_forward),
  ],
);

Output, long text:

Output, short text:

Answer 2

Do you only want to use FittedBox to fit the text in same row ? Alternatively, if you need to fit or wrap the text in single row, you need to wrap the Text inside Flexible widget which basically fits the child tightly.

I recreated your case and was able to achieve below:

Code for above is:

Row(
      children: [
        Icon(Icons.arrow_back),
        Expanded(child: SizedBox()),
        Icon(Icons.account_box),
        Flexible(
        child:
        Text("Some Text Here and here and here and here and more and more and more and more and more and more ", maxLines: 1)), // ➜ This is the text.
        Expanded(child: SizedBox()),
        Icon(Icons.arrow_forward),
      ],
      )

Since, you have set maxLines to be 1, it's going to take your original text Some text here and will display it properly without overflow. If you add more text to it, it's not going to expand the row and will prevent overflow.