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

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:

enter image description here

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.


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:

enter image description here

Output, short text:

enter image description here

Tags:

Layout

Flutter