Flutter: Row with flexible and spacer not working

Question

I am building a widget to look like Tweets. At the moment, the header is the following row:

Row(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        children: [
          Flexible(
            flex: 3,
            child: Container(
              margin: const EdgeInsets.only(right: 5.0),
              child: Text(
                poster.name,
                style: Theme.of(context)
                    .textTheme
                    .headline4!
                    .copyWith(fontWeight: FontWeight.bold, fontSize: 14),
              ),
            ),
          ),
          Expanded(
            flex: 14,
            child: Text(
              '${poster.handle} · ${timeago.format(wave.createdAt)}',
              style:
                  Theme.of(context).textTheme.headline5!.copyWith(fontSize: 12),
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Spacer(),
          if (showPopup)
            WaveTilePopup(
                poster: poster, wave: wave, user: user, onDeleted: onDeleted),
        ],
      ),

Which look like this:

When i increase the flex property of the name text, it will fix the formatting on the name, however shorter names will result in the PopUp being away from the right alignment, which is where I want it to be in a consistent manner:

Any ideas?

Thanks!

Answer 1

Instead of all hard-coded flex, you can just wrap your more button with expanded and align widget like this:

Row(
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize: MainAxisSize.max,
    children: [
      Container(
        margin: const EdgeInsets.only(right: 5.0),
        child: Text(
          poster.name,
          style: Theme.of(context)
              .textTheme
              .headline4!
              .copyWith(fontWeight: FontWeight.bold, fontSize: 14),
        ),
      ),
      Text(
        '${poster.handle} · ${timeago.format(wave.createdAt)}',
        style: Theme.of(context)
            .textTheme
            .headline5!
            .copyWith(fontSize: 12),
        overflow: TextOverflow.ellipsis,
      ),
      Expanded(
        child: Align(
          alignment: Alignment.centerRight,
          child: showPopup
              ? WaveTilePopup(
                  poster: poster,
                  wave: wave,
                  user: user,
                  onDeleted: onDeleted)
              : SizedBox(),
        ),
      ),
    ],
  ),