title: Text widget doesn't ellipsis correctly in Flutter
body: <ul>
  <li>I am trying to create a list view that contains 10 data, in each item there four widgets that wraps inside a row.</li>
  <li>First i inserted a circle image widget, in next I added expanded widget to divide the text widgets equally.</li>
  <li>Almost, I have achieved but i found difficulty in ellipsis the text.</li>
  </ul>
  
  <p><strong>Code</strong> </p>
  
  <pre><code>class EmailPage extends StatefulWidget {
      @override
      _EmailPageState createState() =&gt; _EmailPageState();
      }
  
  class _EmailPageState extends State&lt;EmailPage&gt; {
    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: &lt;Widget&gt;[
              new IconButton(
                icon: new Icon(Icons.edit),
                onPressed: () =&gt; 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: &lt;Widget&gt;[
                        SizedBox(
                          width: 30,
                          height: 30,
                          child: CircleAvatar(
                              backgroundColor: Colors.brown.shade800),
                        ),
                        Expanded(
                          child: new Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: &lt;Widget&gt;[
                              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(
                                  "&amp;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),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                }),
          ));
    }
  }
  </code></pre>
  
  <p><strong>Screenshot 1</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HK6uN.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/HK6uN.jpg" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>When we remove <code>overflow: TextOverflow.ellipsis</code> in the text widget look like this [Screenshot 2]</p>
  </blockquote>
  
  <p><strong>Screenshot 2</strong></p>
  
  <p><a href="https://i.stack.imgur.com/n4czx.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/n4czx.jpg" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>In above image i didn't get the full text "AdellenaJacksonnnnnnnnn
    ", but <strong>expanded restrict the widget
    how many flex can be shown in it. Problem is ellipsis not working as
    expected</strong></p>
  </blockquote>
  
  <p><strong>Note : When i remove the space in the string <code>var name = "AdellenaJacksonnnnnnnnn";</code> like this ellipsis working fine</strong></p>