12
  • 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

enter image description here

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

Screenshot 2

enter image description here

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

5 Answers 5

27

The simplest way:

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

enter image description here

For simpler to use, you can write an extension:

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

usage:

final name = 'Adellena Jacksonnnnnnnnn'.useCorrectEllipsis();
6
  • Thanks this works great, but I wonder how expensive this is if you do this on 50 to 100 items
    – Coda Veto
    Jul 15, 2021 at 14:28
  • what is this? Can you be kind to give me some information about this solution?
    – vietstone
    Aug 21, 2021 at 17:59
  • thanks, very simple solution. can you add some explanation about this answer?
    – Nazarudin
    Aug 26, 2021 at 10:00
  • 2
    Hi, @Nazar \u200B means Zero width space characters, it's a special space you can't see but would act as normal space. Aug 27, 2021 at 8:29
8
+50

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'; enter image description here

name = 'Nadeem Jacksoonnnnnnnnnn';

enter image description here

0
4

overflow: TextOverflow.fade did the trick for me.

1
  • 1
    It does produces a better result indeed
    – ncuillery
    Aug 9, 2020 at 22:27
2

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.

1
  • 1
    Is this will work ?? .. what will be the difference May 2, 2019 at 13:11
0

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

2
  • 1
    Yes i tried it out, it seems works but why i doesn't work when i left one space in between the strings May 2, 2019 at 13:11
  • 1
    because it looks like a block of string otherwise in seperated type they looks like couple of words May 2, 2019 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.