Flutter Text overflow doesn't work for the second row

Question

I have a column with text. I don't know the exact size of the incoming string, so I want some of my texts to end with an ellipsis.

  Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 16),
              Align(
                alignment: Alignment.center,
                child: Text(_model._schoolName,
                    overflow: TextOverflow.ellipsis,  //this one works
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w600,
                        fontSize: 18)),
              ),
              SizedBox(height: 12),
              Row(
                children: <Widget>[
                  Icon(Icons.location_on, color: Colors.grey[700]),
                  Container(width: 8),
                  Text(_model._guides,
                      overflow: TextOverflow.ellipsis,  //this one doesn't work
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w400)),
                ],
              ),
              SizedBox(height: 12),
              Row(
                children: <Widget>[
                  Icon(Icons.attach_money, color: Colors.grey[700]),
                  Container(width: 8),
                  Text(_model._priceFrom,
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w400))
                ],
              )
            ],
          ),
        )

First time I use TextOverflow.ellipsis works and the second doesn't. Can anybody explain why? Thanks!

Answer 1

Just wrap your Text in another Flexible, like so:

Row(
  children: <Widget>[
    Icon(Icons.location_on, color: Colors.grey[700]),
    Container(width: 8),
    Flexible(
      child: Text(_model._guides,
          overflow: TextOverflow.ellipsis, //this one now works :)
          style: TextStyle(
              fontSize: 14,
              color: Colors.black,
              fontWeight: FontWeight.w400)),
    ),
  ],
),

The first Flexible wrapping your main Column sets the layout for its direct children, that's why the first Text works, because it's a direct child (layout wise) of the Column. But then you add a Row which sets its own children's layout, and the overflow won't work because it doesn't has any width constraint, by wrapping that Text in a Flexible you tell it to grab all the space it can up to its parent width, and apply whatever TextOverflow you need, ellipsis in this case.

Hope it helps.

Answer 2

The reason is that you need to tell the Text widget the max width for it to wrap. In a Row you can set it's mainAxisSize to MainAsixSize.max and wrap the Text widget on a Flexible to take the remaining space.

Row(
  mainAxisSize: mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Icon(Icons.location_on, color: Colors.grey[700]),
    Container(width: 8),
    Flexible(
      child: Text(_model._guides,
        overflow: TextOverflow.ellipsis,  //this one doesn't work
        style: TextStyle(
          fontSize: 14,
          color: Colors.black,
          fontWeight: FontWeight.w400,
        ),
      ),
    ),
  ],
),