overflow ellipsis only for last widget in the row - mobile

Question

I have a Row that contains images and texts, all text widgets should fill all available spaces in the row except the last one. If the last Text doesn't fit the screen it should be shorted to three dots(TextOverflow.ellipsis).
I have this solution:
List<Widget> widgets = [];
for (var item in listItems) {
widgets.add(Image.asset("images/image.png", width: 10.0, height: 10.0));
widgets.add(Flexible(child:Padding(padding: EdgeInsets.only(right: 8.0),child:Text(item.text, style: captionStyle, overflow:TextOverflow.ellipsis))));
}
//then
Expanded(child:new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: widgets
),
)
But, it doesn't give needed effect
⁍ - Image
| - Row side
(for better understanding)
widgets are placing in this way - | ⁍ someTex... ⁍ someTex... ⁍ someTex...|
or | ⁍ so... ⁍ so... ⁍ so... ⁍ so... ⁍ so...| if a have a lot of items in the list
I need that widgets will build this way -
|⁍someText ⁍someTex ⁍someTex ⁍ some...| only last widget should be shorted
BTW, i don't know how many items will come to the loop.
Could someone explain how I can short only last widget?
Thanks in advance!

Answer 1

Very simple example, but here only the last text widget is clipped
Row(
children: <Widget>[
Text("Some Text", overflow:TextOverflow.ellipsis),
Text("Some Text", overflow:TextOverflow.ellipsis),
Text("Some Text", overflow:TextOverflow.ellipsis),
Text("Some Text", overflow:TextOverflow.ellipsis),
Text("Some Text", overflow:TextOverflow.ellipsis),
Expanded(child: Text("Some Text", overflow:TextOverflow.ellipsis)),
],
),
So in your case, you need to wrap the last children in Expanded like this:
int count = 1;
for (var item in listItems) {
widgets.add(Image.asset("images/image.png", width: 10.0, height: 10.0));
if(count == listItems.length) widgets.add(Expanded(Flexible(child:Padding(padding: EdgeInsets.only(right: 8.0),child:Text(item.text, style: captionStyle, overflow:TextOverflow.ellipsis))));
else widgets.add(Flexible(child:Padding(padding: EdgeInsets.only(right: 8.0),child:Text(item.text, style: captionStyle, overflow:TextOverflow.ellipsis))));
count++;
}