Text widget doesn't ellipsis correctly in Flutter - 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

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 3

overflow: TextOverflow.fade did the trick for me.

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