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:
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:
Output, short text: