Flutter：左对齐扩展的小部件

Question

I am trying to get some text left aligned and fitting to a single row, with the last part being kept in it's original form. Something like the following:

// Original
A really long name which would wrap / Yesterday
// Output
A really long name... / Yesterday

The code below works for the above example, but:

// Original
Short Name / Yesterday
// Required Output (all left aligned)
Short Name / Yesterday
// Actual Output
Short Name            / Yesterday

Is there a way to achieve that? The code below is correctly shortening the left-hand component but alignment is off.

      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        ListTile(
          leading: CircleAvatar(
            backgroundColor: Colors.blue,
            child: Text('AB'),
          ),
          title: Text('Some text',
              overflow: TextOverflow.ellipsis, maxLines: 1),
          subtitle: Row(children: <Widget>[
            Container(
                child: Text('Person Name,
                    overflow: TextOverflow.ellipsis, maxLines: 1)),
            Expanded(
                flex: 1,
                child:
                    Text(' / Yesterday'))
          ]),
        ),
      ]);

Answer 1

Just add the mainAxisAlignment property and set it to mainAxisAlignment.spaceBetween. This will space out your container and Text. Just remove the flex property from the expanded widget. It already defaults to 1.

Answer 2

I met the same problem and finally I found a solution. Put your "A really long name which would wrap" text into Flexible() instead of Expanded(). This will make your text get free spaces only when needed. So when your text content is not long enough, it won't take all spaces.