Clip the 1st widget with ellipsis (on overflow) in a Row of 3 Text widgets

February 15, 2022

I have a Row of 3 text widgets. I want the first two to stay together and the third one to be aligned at the end of the row. The first text has the potential to cause an overflow, and when that happens, I only want the first text to be clipped by an ellipsis.

I have tried various things, with RichText, Spacer, Expanded, Flexible, etc. The closest I have come to a solution is with this:

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Flexible(
      child: Text(
          "Left most text that overflows the screen and creates an ellipsis",
          overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      "Xyz",
      style: customStyle1,
    ),
    Text(
      " 10:20",
      style: customStyle2,
    ),
  ],
),

This is what it leads to (with added colors). If the time stays to the right in the first row, the problem will be solved.

Adding a spacer between the last two texts causes the first to occupy just half the screen, i.e., the ellipsis gets added prematurely. Adding an Expanded to last Text causes the

"NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE" bug.

The first and the last row in this image are the desired outputs.

How do I accomplish this? And can anyone explain the issue with using a Spacer or an Expanded as mentioned above?

>Solution :

We can use two rows to align items, Flexible and Text softWrap to fix the overflow

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: const [
          Flexible(
            child: Text(
              "Left most text that overflows the screen and creates an ellipsis",
              overflow: TextOverflow.ellipsis,
              softWrap: false,
            ),
          ),
          Text("Xyz"),
        ],
      ),
    ),
    Text(
      " 10:20",
    ),
  ],
),