I'm trying to understand how to use layouts. I hav...

# compose

[Nat Strangerweather]

I'm trying to understand how to use layouts. I have :

Column(Modifier.fillMaxHeight()) {}

Why are the bottom squares no reaching the bottom of the screen? I have not put any padding.

[Yann Badoual]

The column is actually filling the vertical space, but it doesn't mean that the content will be stretched to fill the parent.

[Nat Strangerweather]

Ah ok thanks, how do I get the content to fill the parent?

[Yann Badoual]

You can probably use weight modifier to achieve that. Setting the same weight on each children

[Nat Strangerweather]

I already have

[Yann Badoual]

Can you share the code please?

[Nat Strangerweather]

sure

[Nat Strangerweather]

MaterialTheme {
        Column(Modifier.fillMaxHeight()) {
            val modifier1 = Modifier
                .fillMaxWidth()
                .weight(1f)

            val modifier = Modifier
                .size(150.dp)
                .weight(1f)

            Row(modifier1) {
                Box(modifier, backgroundColor = Color.Magenta)
                Box(modifier, backgroundColor = Color.Cyan)
            }
            Row(modifier1) {
                Box(modifier, backgroundColor = Color.Magenta)
                Box(modifier, backgroundColor = Color.Cyan)
            }
            Row(modifier1) {
                Box(modifier, backgroundColor = Color.Magenta)
                Box(modifier, backgroundColor = Color.Cyan)
            }
        }
    }

[Yann Badoual]

Use fillMaxHeight() instead of size(150.dp) => you're manually setting the size to 150.dp, so the actual box is not stretching because of it

[Nat Strangerweather]

Ok, thanks for this, makes sense!🙂

[sante]

Also, if you want your boxes to keep that size, you can use verticalArrangement for Column (horizontalArrangement for Row). you set it like

Column(
   modifier = fillMaxHeight(),
   verticalArrangement = Arrangement.SpaceBetween,
){
   ...
}

You have other options for arrangement like SpaceAround and SpaceEvenly. The option in the snippet makes it so that the contents of the column are spread from top to bottom, with the first element right at the top and the last one right at the end