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 wi

Answer 1

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,
    ),
  );
}

Answer 2

Widgets can be sized to fit within a row or column by using the Expanded or Flexible widget. To fix the previous example where the row of Text is too wide for its render box, wrap each Text with an Expanded or Flexible widget.

Perhaps you want a widget to occupy twice as much space as its siblings. For this, use the Expanded widget flex property, an integer that determines the flex factor for a widget. The default flex factor is 1. The following code sets the flex factor of the middle image to 2:

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      flex: 2,
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);