[SOLVED] Flutter - Align only one widget inside of a Row

Flutter - Align only one widget inside of a Row

I have a text that can vary in height, followed by a PopupMenuButton. I want the text to be center-aligned on the vertical axis (so that there isn't a weird white space when there's only 1 ligne of text) but the PopupMenuButton to stay in the top right corner, no matter the height of the text. Thus using crossAxisAlignement doesn't work here since all widgets are affected. Using an Align widget on the text or PopupMenuButton doesn't work and textAlign doesn't either It seems any solution must be implemented on the Row level and not in its children, which makes sense.

For now I'm using a Row to contain these 2 widgets, but I'm not so sure it is what I need if I want the behaviour mentionned before. Is there a solution for the Row, or another widget I can use for this ?

Here is the code as it stands. Thanks.

Row(
  children: [
    Expanded(
      child: RichText(
        text: TextSpan(), // bunch of text in there
        )
      )
    ),
    SizedBox( // To box in the 3 dots icon (material design forces 48px otherwise)
      height: 24,
      width: 24,
      child: PopupMenuButton(
        padding: EdgeInsets.all(0),
        onSelected: menuSelect,
        itemBuilder: (BuildContext context) {
          return [
            PopupMenuItem(value: 0, child: Text('Read', textAlign: TextAlign.center,),),
            PopupMenuItem(value: 1, child: Text('Delete', textAlign: TextAlign.center,),)
          ];
        },
      ),
    )
  ],
)

Solution

Here's a way to do it :

Wrap your SizedBox with an Align(alignment: Alignment.topRight)
Wrap your Row with an IntrinsicHeight so that the cross-axis doesn't stretch

Alternatively, you might want to look into the Stack widget if you're not familiar with it.