CODEWITHSUNDEEP
dartflutterflutter-layout
Luke Pighetti
Luke Pighetti

Reputation: 4841

Text will not overflow in row

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.

enter image description here

Upvotes: 8

Views: 4733

Answers (4)

Pratik Lakhani
Pratik Lakhani

Reputation: 335

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: Example:

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

Upvotes: 0

Luke Pighetti
Luke Pighetti

Reputation: 4841

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

Upvotes: 15

babernethy
babernethy

Reputation: 1095

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

Upvotes: 1

imtoori
imtoori

Reputation: 600

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

Upvotes: 1

Related Questions