Text widget doesn't ellipsis correctly in Flutter

Question

• I am trying to create a list view that contains 10 data, in each item there four widgets that wraps inside a row.
• First i inserted a circle image widget, in next I added expanded widget to divide the text widgets equally.
• Almost, I have achieved but i found difficulty in ellipsis the text.

Code

class EmailPage extends StatefulWidget {
    @override
    _EmailPageState createState() => _EmailPageState();
    }

class _EmailPageState extends State<EmailPage> {
  GlobalKey _keyRed = GlobalKey();
  var name = "Adellena Jacksonnnnnnnnnnnnnnnnnnnnnnnnnnnn";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 0.0,
          backgroundColor: greenColor,
          title: const Text('Inbox'),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.edit),
              onPressed: () => Navigator.of(context).pop(null),
            ),
          ],
        ),
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: ListView.builder(
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: new Row(
                    children: <Widget>[
                      SizedBox(
                        width: 30,
                        height: 30,
                        child: CircleAvatar(
                            backgroundColor: Colors.brown.shade800),
                      ),
                      Expanded(
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Expanded(
                                flex: 4,             
                                child: Container(
                                  child: new Text(
                                          name,
                                          overflow: TextOverflow.ellipsis,
                                          softWrap: false,
                                          style: TextStyle(fontSize: 14),
                                        ),
                                  ),
                                ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "&14215",
                                textAlign: TextAlign.center,
                                style: TextStyle(fontSize: 12),

                              ),
                            ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "1000 min ago",
                                textAlign: TextAlign.end,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 14),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              }),
        ));
  }
}

Screenshot 1

When we remove overflow: TextOverflow.ellipsis in the text widget look like this [Screenshot 2]

Screenshot 2

In above image i didn't get the full text "AdellenaJacksonnnnnnnnn ", but expanded restrict the widget how many flex can be shown in it. Problem is ellipsis not working as expected

Note : When i remove the space in the string var name = "AdellenaJacksonnnnnnnnn"; like this ellipsis working fine

Answer 1

The simplest way:

var name = 'Adellena Jacksonnnnnnnnn';
name = name.replaceAll('', '\u200B');

For simpler to use, you can write an extension:

extension StringExtension on String {
  String useCorrectEllipsis() {
    return replaceAll('', '\u200B');
  }
}

usage:

final name = 'Adellena Jacksonnnnnnnnn'.useCorrectEllipsis();

Answer 2

overflow: TextOverflow.fade did the trick for me.

Answer 3

You could make use of this stupid hack, by splitting the name into, you could modify and actually make use of it if you set any max length for first name.

I have clipped the first name so it won't look like it's overflowing get along with the ui, assume there is no maxlength

Flexible(
 child: Text(
 tempname[0],
 overflow: TextOverflow.clip,
 maxLines: 1,
 ),
),

The last name is set ellipsis to give a hit the name is overflowing

Flexible(
 child: Text(
 tempname[0],
 overflow: TextOverflow.ellipsis,
 ),
),


ListView.builder(
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) {
                var tempname = name.split(' ');
                return Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: new Row(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      SizedBox(
                        width: 30,
                        height: 30,
                        child: CircleAvatar(
                            backgroundColor: Colors.brown.shade800),
                      ),
                      Expanded(
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Expanded(
                              flex: 4,
                              // width: 100,
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Flexible(
                                    child: Text(
                                      tempname[0],
                                      overflow: TextOverflow.clip,
                                      maxLines: 1,
                                    ),
                                  ),
                                  Text(' '),
                                  Flexible(
                                    child: Text(
                                      tempname[1],
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  )
                                ],
                              ),
                            ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "&14215",
                                textAlign: TextAlign.center,
                                style: TextStyle(fontSize: 12),
                              ),
                            ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "1000 min ago",
                                textAlign: TextAlign.end,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 14),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              }),

name = 'Adellenaddddddddddddd Jacksoonnnnnnnnnn';

name = 'Nadeem Jacksoonnnnnnnnnn';

Answer 4

Try with flexible instead of Expanded because. Official Documentation

Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space.

Answer 5

try to type the surname seperated like that jackson nn nn nnn nnn that will work better