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

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'),
    ),
  ],
);