How can I vertically center a composable in a Row?...

# compose

[YASAN]

How can I vertically center a composable in a Row? If I use fillMaxHeight it will fill the whole screen. I cannot find a way to make it just fill the parent height.

[YASAN]

I saw a matchParentSize or something similar in a compose example code but I cannot use it in any of my modifiers

[Piotr Prus]

use verticalAlignment

Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround, verticalAlignment = Alignment.CenterVertically)

[YASAN]

Thanks! I am still not so used to using these two params xd

[Johan Reitan]

You can also center/align individual children inside the `Row`/`Column` using Modifier.align()

[Chris Sinco [G]]

Indeed - combining the align modifiers and the alignment/arrangement parameters, it gives you a lot of flexibility. And then if things get really complex, we do have ConstraintLayout also.

[Chris Sinco [G]]

One of my most favorite features is Arrangement.spacedBy - always hated the fence-post problem in a loop in the HTML days before CSS Grid. Glad Compose has this right out the gate.

[Colton Idle]

Gotta check out spacedBy.

My biggest issue with trying to centerVertically is that the IDE autocompletion still doesn't auto complete verticalAlignment or horizontalArrangement. There's been a handful of modifiers and args that haven't showed up in autocompletion and probably through me in a loop and then I just typed it out by hand and it magically compiled.

[Chris Sinco [G]]

Yeah our autocomplete experience needs some work. We have some weighting issues where things are not showing up at the top/first, or some parameters are completely missed, e.g. alignment and arrangement params on Row/Column.

[Colton Idle]

Yes. Thank goodness it's not just me.

[Chris Sinco [G]]

I think partially we are seeing issues as well due to some latency with Kotlin language services and fetching the autocomplete results. We need to look further into it - but yes it’s not just you 🙂