Truncated text only shows first four letters

Question

I have a container that has a width of 300 which shows the name widget on it. The name widget must truncate the names longer than 300 width. It shows three dots that indicate it truncates the text, but only shows the first 4 letters of the name, I want to show the name as far as possible up to 300 pixels. How to do that.

The widget that calls the name widget

Row(children: [
            Container(
              width: cardWidth,
              child: Padding(
                padding: EdgeInsets.only(top: 22),
                child: Align(
                   
                  alignment: Alignment.center,
                  child: Container(
                    width: 300,
                     
                    child: FittedBox(
                      fit: BoxFit.contain,
                      child: SizedBox(
                          width: cardWidth,
                          child:
                              NameWidget()), 
                    ),
                  ),
                ),
              ),
            ),

The name Widget

Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                child: Row(
                  children: [
                    Flexible(
                      child: new Container(
                        width: 250,
                        padding: new EdgeInsets.only(right: 13.0),
                        child: new Text(
                          'Text largeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeEEE',
                          overflow: TextOverflow.ellipsis,
                          style: new TextStyle(
                            fontSize: 25.0,
                            fontFamily: 'Roboto',
                            color: new Color(0xFF212121),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    Icon(Icons.home)
                  ],

Output shown (see, there's more space to show more letters of the name)

Does this answer your question? [Limit amount of characters of Text widget?](https://stackoverflow.com/questions/57465820/limit-amount-of-characters-of-text-widget) — N Sharma, Jul 31 '21 at 11:30
@NSharma not really, because I don't know how many letters will fit into the space I have, I need the flutter to automatically decide how many letters to be displayed for the given space of 300 pixels width. (It should be dynamically change to the width given) if I state 20 letters etc, it will always will show 20 letters and even throw overflow error if the space is not enough. So your solution is not relevant at all tbh — Pretty_Girl, Jul 31 '21 at 11:33

score 0 · Answer 1 · answered Jul 31 '21 at 11:37

0

use constraints property and set BoxConstraints to get the expected output.

Container(
            constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
            child: new Text(
              'MTextlargeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeEEE',
              overflow: TextOverflow.ellipsis,
              style: new TextStyle(
                fontSize: 25.0,
                fontFamily: 'Roboto',
                color: new Color(0xFF212121),
                fontWeight: FontWeight.bold,
              ),
            ),
          ),

answered Jul 31 '21 at 11:37

Mohit Kushwaha

1,003
1
10
15

Your text doesn't have a space in between, once you put a space, it truncates from there. Place my sample text and you'll see. – Pretty_Girl Jul 31 '21 at 11:46
@Pretty_Girl If you use the width property of container instead of constraints then you have to put space between the text string but if you do it with constraints then no need to put space to truncate, it will truncate as per constraint, I tried this before posting the answer. – Mohit Kushwaha Aug 01 '21 at 05:35

Truncated text only shows first four letters

1 Answers1