Flutter: vertically align each column in a Row in different ways (top, center, bottom)

Daniel Possamai 0
Viewed 18

I would like to vertically align each column in a Row widget in a different way:

  1. First column must be aligned at the top.
  2. Second column doesn't matter, but it could be centered.
  3. Third column must be aligned at the bottom.

enter image description here

Row widget only gives the option to align all of it's columns in the same way:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: []
)

Important: this Row has a dynamic height, according to the contents of the central column.

I have already tried it in many ways, but without success. I would appreciate any ideas. Thanks.

row alignment flutter
1 Answers

I had some difficulties replicating the same UI but in the end that's how it turned out:

            IntrinsicHeight(
              child: Row(
                children: [
                  Expanded(
                    child: Column(
                      children: const [
                        Text("text, text, text"),
                      ],
                    ),
                  ),
                  const Expanded(
                    child: Text(
                        "text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text"),
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: const [
                        Text("text, text, text"),
                      ],
                    ),
                  ),
                ],
              ),
            ),

The IntrinsicHeight gives all the Row's child the same height.

Here's a running example: https://zapp.run/edit/flutter-zn00679n106?entry=lib/main.dart&file=lib/main.dart

L. Gangemi0
Related