I've got two texts and one icon in a row. you can see this in figure one. However, when my text extends, I want the text to fill up the blank space in the middle by shifting the icon accordingly just the way it appears in figure two. However, if the text is too long and overflows, I want to add an ellipsis to the end of the text so it shows three dots (...). I've already added the text-overflow ellipsis to the text code but it doesn't seem to work. If I use an expanded widget on the text, the ellipsis works (figure three) but the text stops aligning at the right side of the row which is where I want it. So basically, I want the row to appear exactly how it looks in figure 1 and to add an ellipsis to figure two when it overflows. Help fix

My Code

Column(
    children: [
      Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          year,
          style: Theme.of(context).textTheme.subtitle2,
        ),
        Spacer(),
        icon,
        SizedBox(width: 0.1),
        Text(
          figure,
          style: Theme.of(context).textTheme.subtitle2,
          overflow: TextOverflow.ellipsis,
        ),
      ],
),
      Divider(
        height: 5,
        thickness: 0.7,
        color: Theme.of(context).dividerColor),
    ],
  );

images

CodePudding user response：

You can try this. Please edit the flex value as per your requirement

Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
   Flexible(
    flex: 2
    child :Text(
     year,
     style: Theme.of(context).textTheme.subtitle2,
     overflow: Overflow.ellipsis,
     ),
   )
   Flexible(
    flex : 8
     child: Row(
       mainAxisAlignment : MainAxisAlignment.end
       mainAxisSize : MainAxisSize.min
       children : [
        icon,
        SizedBox(width: 0.1),
        Flexible(
           child: Text(
             figure,
             style: Theme.of(context).textTheme.subtitle2,
             overflow: TextOverflow.ellipsis,
           ),
        )
       ]
     )
    )
  ]
)