Flutter row, align items individually in cross axis

user_2919052 0
Viewed 1736

In a row widget, with the crossAxisAlignment: CrossAxisAlignment.center property, all the widgets inside of the row will be vertically centred inside the Row, as expected.

But how do I do if I want only one of them aligned for exmample to the start, something like the picture below:

enter image description here

I can think of some ways to do it, like adding a Column in the last widget, and play with the main axis aligment, Expanded...etc etc but seems like a lot of boilerplate code for such a simple output, ther might be out there a simpler and more elegant way to achieve this??

flutter vertical-alignment widget
2 Answers

You can wrap widget 4 in a Container and set the height as widget 3 and add Alignment.topCenter

user_79796210

Ah, stumbled across this and found a solution.

Wrap widgets 3 and 4 in another Row and set the inner Row to CrossAxisAlignment.start.

Row(
  children: [
    LargeWidget('w1'),
    LargeWidget('w2'),
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        LargeWidget('w3'),
        SmallWidget('w4'),
      ],
    ),
  ],
);

This frees you from having to know the height of each widget.

user_45999670
Related