Flutter Two Text overflow inside a Row

Question

I want to put three text widgets inside a row. Two text widgets can be long or short as it's coming from API.

For example, there is a pickup location and a destination location which are separated by a "-".

I want that, it should not go on the next line, as all these three text widgets are now inside a row. Also if any of these text widgets got a single word then it should take minimum space. And if it got a long text from API then it will take up to half of the space maximum and the rest of the text is shown overflow.ellipsis

Answer 1

I found the solution. like this:-

 Expanded(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Flexible(
            fit: FlexFit.loose,
            child: Text(
              'Embassy of the United States of America'.replaceAll(RegExp(' '), '\u00A0'),
              style: TextStyle(
                  color: Color(0xFF202020),
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  overflow: TextOverflow.ellipsis
              ),
            ),
          ),
          Text('-'),
          Flexible(
            fit: FlexFit.loose,
            child: Text(
              'Holiday Inn Dhaka City Centre, an IHG Hotel'.replaceAll(
                  RegExp(' '), '\u00A0'),
              style: TextStyle(
                  color: Color(0xFF202020),
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  overflow: TextOverflow.ellipsis
              ),
            ),
          ),
        ],
      ),
    )

here I use flexible to share free space equally for two text widgets if the text got a long text. and if one of those is not too long then it will take minimum space because of the flex fit set to loose. also, push the text widget to take maximum space and then start Overflow.ellipsis(...) here is used:-

name.replaceAll(RegExp(' '), '\u00A0')

and by this, I solved the problem I faced.