'Text widget doesn't ellipsis correctly in Flutter
- 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.ellipsisin 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
Solution 1:[1]
overflow: TextOverflow.fade did the trick for me.
Solution 2:[2]
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();
Solution 3:[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';
Solution 4:[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.
Solution 5:[5]
try to type the surname seperated like that jackson nn nn nnn nnn that will work better
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | georkings |
| Solution 2 | |
| Solution 3 | Nadeem Siddique |
| Solution 4 | |
| Solution 5 | Murat Aslan |