Flutter Text overflow doesn't work for the second row - flutter

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,
),
),
),
],
),

Answer 3

This will set the text to a single line text and append it with an ellipsis. Note that it will only start appending once the width exceeds that of the parent widget.
Text(
"Really long text here!",
overflow: TextOverflow.ellipsis,
maxLines: 1,
)