Question 236090 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Two Text overflow inside a Row

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

For more see the image:

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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. See final Result


  2. 0

    We can use the RichText widget along with TextSpan to style different parts of the text differently.

    Store data in 3 diff var.

    String? text1 = "Kasem bazar";
String? text2 = "Dhaka";
String? text3 = "Bangladesh, Asia";

    Here is the implementation. You can also resize, restyle and customize everything yourself.

    return Scaffold(
  body: SizedBox(
    width: MediaQuery.of(context).size.width / 2,
    child: Center(
      child: RichText(
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
        text: TextSpan(
          style: const TextStyle(fontSize: 18),
          children: [
            TextSpan(
                text: text1,
                style: const TextStyle(fontWeight: FontWeight.bold)),
            TextSpan(
                text: " - $text2, ",
                style: const TextStyle(fontWeight: FontWeight.normal)),
            TextSpan(
                text: text3,
                style: const TextStyle(fontWeight: FontWeight.normal)),
          ],
        ),
      ),
    ),
  ),
);

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search