Flutter – two text in a row with left one overflowing gracefully

Question

How do I get two side-by-side Text widgets to only allow the left-most one to overflow gracefully?

One text widget in a column is easy to overflow gracefully. Two text widgets side-by-side in a row is problematic.

Stack overflow wants more details but honestly, I'm probably just wasting more of your time at this point.

Widget _listItem({String title, String subtitle}){
  return Row(
    children: <Widget>[
      _listItemIcon(),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _listItemTitle(title),
            Row(
              children: <Widget>[
                _listItemSubtitle(subtitle), // how do I allow this to overflow gracefully
                _listItemTime("2m") // 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(
    "[$subtitle]",
    softWrap: false,
    overflow: TextOverflow.fade,
    );
}

Widget _listItemTime(String time){
  return Text(
    "[$time]",
    softWrap: false,
    overflow: TextOverflow.fade,
    );
}

Widget _listItemFavorite(){
  return Icon(Icons.favorite);
}

I do not understand which part of your code is not working. Heck, I do not even see a row with two `Text` widgets in your screenshot. — creativecreatorormaybenot, Jun 28 '18 at 16:54
@creativecreatorormaybenot subtitles are a concatenation of two `Text`. \ — Rémi Rousselet, Jun 28 '18 at 16:57

boformer · Accepted Answer · 2018-06-28T19:14:10.450

You can use the Flexible widget:

Widget _listItemSubtitle(String subtitle) {
  return new Flexible(
    fit: FlexFit.loose,
    child: Text(
      "[$subtitle]",
      softWrap: false,
      overflow: TextOverflow.fade,
    ),
  );
}

Alternative:

If you prefer that the time widget is always on the right, you could wrap the subtitle text in an Expanded widget:

Widget _listItemSubtitle(String subtitle){
  return Expanded(
    child: Text(
      "[$subtitle]",
      softWrap: false,
      overflow: TextOverflow.fade,
    ),
  );
}

score 0 · Answer 2 · answered Jun 06 '23 at 12:35

Sometimes we have a lot of different widgets in the Row, in this case, we can use this approach

        child: SingleChildScrollView(
          physics: const NeverScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          child: Row(
            children: items,
          ),
        ),

Flutter – two text in a row with left one overflowing gracefully

2 Answers2

Linked