title: In Flutter, how to use FittedBox to resize Text inside of a Row?
body: <p>I have a row, with an icon at each side, and then a text with an icon in the middle:</p>
  
  <pre><code>@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),
      ],
    );
  }
  </code></pre>
  
  <p>When the text gets big enough to fill the whole space, I want a <code>FittedBox</code> to make is smaller. So I tried this:</p>
  
  <pre><code>      FittedBox(child: Text("Some Text Here. More. More. More. More. More. More. More. More. ", maxLines: 1)), 
  </code></pre>
  
  <p>It doesn't work (it overflows). I believe the problem is that <code>Row</code> doesn't tell <code>FittedBox</code> the maximum size it could have. I have thought about using <code>FittedBox</code> with <code>Expanded</code>, <code>IntrinsicWidth</code>, <code>UnconstrainedBox</code>, <code>Flexible</code> and <code>Align</code>, to no avail.</p>
  
  <p>How can I solve this? </p>
  
  <p><strong>Update:</strong> I wrote an article which would have helped me solve this problem: <a href="https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2" rel="noreferrer">https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2</a></p>