Flutter Row Text Overflow

Question

I can't get this to layout properly.

I'm trying to achieve

This is what I tried so far that gets me the closest to it but isn't exactly right.

  Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
    Flexible(
      child: Row(children: [
        PrefixIcon(),
        Flexible(
          child: DefaultTextStyle(
            overflow: TextOverflow.ellipsis,
            child: TextGoesHere(),
          ),
        ),
        SuffixIcon(),
      ]),
    ),
    TrailingIcon(),
  ]),

But Flexible with FlexFit.loose acts like Expanded so the SuffixIcon gets pushed to the end even though TextGoesHere is a short text.

I got so far

Please help.

Answer 1

If you consider ..from TextOverflow.ellipsis, this I've got so far with row.

color container just for visual

Widget

 Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("Prefix"),
            Expanded(
              child: Container(
                color: Colors.deepOrange,
                child: Row(
                  children: [
                    Flexible(
                      child: Text(
                        "Very LongggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggText",
                        maxLines: 1,
                      ),
                    ),
                    Icon(
                      Icons.tag_sharp,
                    )
                  ],
                ),
              ),
            ),
            Text("TrailingIcon"),
          ],
        ),

Else, we can use LayoutBuilder if we know the prefix and Icons size.