Text will not overflow in row

Question

I have text in a row that is overflowing and it will not clip properly. Below is a simple hierarchy of my Widget with notes.

ListView
  ListItem1
  ...
  ListItemN
    Padding
      Row // mainAxisAlignment.spaceBetween
        Row
          IconWidget
            Container
              Padding
                Image // 64px square
          TitleWidget // overflowing but not clipping
            Text // TextOverflow.fade
        ScoreWidget
          Container // boxDecoration, color & borderRadius
            Padding
              Text

I have tried wrapping TitleWidget in Expanded, Flexible, and OverflowBox and I keep getting infinite length errors. Here is a photo of the rendered content.

Sibell

Answer 1

Solved, the middle most Widget needs to be in an Expanded widget. Also cleaned it up a bit.

ListView
  ListItem1
  ...
  ListItemN
    Container //padding
      Row
        IconWidget
          Container // padding
            Image // 64px square
        TitleWidget
          Expanded // added Expanded
            Text // TextOverflow.fade
        ScoreWidget
          Container // boxDecoration, color & borderRadius, padding
            Text

Sibell

Answer 2

I would try to change the row mainAxisSize to MainAxisSize.min

Tropophilous

Answer 3

Are you setting the "maxlines" attribute to >1?

Outgo

Answer 4

I was able to find a solution for this, in case anyone needs it. You can do it using the auto_size_text package:

 Container(
  child: ConstrainedBox(
    constraints: BoxConstraints(
      minWidth: 200.0,
      maxWidth: 200.0,
      minHeight: 50.0,
      maxHeight: 150.0,
    ),
    child: AutoSizeText(
      "Your Text",
      style: TextStyle(fontSize: 20.0),
    ),
  ),
);

Example:

You can further constrain the text by setting maxLines or specify presetFontSizes if you wish to restrict specific font sizes.

Siegler