I have a Column with `verticalArrangement = Arrangement.SpaceBetween` and if it’s `Surface` parent d...

# compose

[Guilherme Delgado]

I have a Column with verticalArrangement = Arrangement.SpaceBetween and if it’s Surface parent defines .fillMaxSize() , the Column’s height is not respected. More in thread

[Guilherme Delgado]

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MixCalcTheme {
                Surface {
                    Ui()
                }
            }
        }
    }
}

@Composable
@Preview
private fun Ui() {
    Column(
        modifier = Modifier
            .padding(horizontal = 20.dp, vertical = 50.dp)
            .fillMaxWidth()
            .height(250.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceBetween
    ) { ... }
...
}

[Guilherme Delgado]

output:

[Guilherme Delgado]

with:

[Guilherme Delgado]

Surface(Modifier.fillMaxSize()) {
    Ui()
}

[Guilherme Delgado]

the result is:

[Guilherme Delgado]

[Guilherme Delgado]

why?

[Guilherme Delgado]

I want SpaceBetween inside a 250.dp of height Column…

[Albert Chang]

Because Surface propergates min size constraints. You can add Modifier.wrapContentHeight() before Modifier.height(250.dp).

[Guilherme Delgado]

Had to add also:

Surface(Modifier.fillMaxSize()) {
    Box(contentAlignment = TopCenter) {
        Ui()
    }
}

[Guilherme Delgado]

to make it align top otherwise it would be rendered in the center

[Guilherme Delgado]

But adding the Box makes wrapContentHeight() not needed

[Guilherme Delgado]

But, yeah, your response helped 🙂 👍

[Albert Chang]

You can use Modifier.wrapContentHeight(align = <http://Alignment.Top|Alignment.Top>).

[Guilherme Delgado]

Perfect! 👌