title: Flutter – two text in a row with left one overflowing gracefully
body: <p>How do I get two side-by-side Text widgets to only allow the left-most one to overflow gracefully?</p>
  <p>One text widget in a column is easy to overflow gracefully.
  Two text widgets side-by-side in a row is problematic.</p>
  <p>Stack overflow wants more details but honestly, I'm probably just wasting more of your time at this point.</p>
  <pre><code>Widget _listItem({String title, String subtitle}){
    return Row(
      children: &lt;Widget&gt;[
        _listItemIcon(),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: &lt;Widget&gt;[
              _listItemTitle(title),
              Row(
                children: &lt;Widget&gt;[
                  _listItemSubtitle(subtitle), // how do I allow this to overflow gracefully
                  _listItemTime(&quot;2m&quot;) // but stop this from overflowing
                ],
              )
            ],
          ),
        ),
        _listItemFavorite()
      ],
    );
  }
  
  //////////////
  Widget _listItemIcon(){
    return Icon(Icons.message);
  }
  
  Widget _listItemTitle(String title){
    return Text(
      title,
      softWrap: false,
      overflow: TextOverflow.fade,
      style: TextStyle(
        fontSize:24.0
      ),
    );
  }
  
  Widget _listItemSubtitle(String subtitle){
    return Text(
      &quot;[$subtitle]&quot;,
      softWrap: false,
      overflow: TextOverflow.fade,
      );
  }
  
  Widget _listItemTime(String time){
    return Text(
      &quot;[$time]&quot;,
      softWrap: false,
      overflow: TextOverflow.fade,
      );
  }
  
  Widget _listItemFavorite(){
    return Icon(Icons.favorite);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/XfML4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XfML4.png" alt="enter image description here" /></a></p>