How to center and space boxes in Jetpack Compose?

112 Views Asked by At

I have a grid with three items.
I would like all my boxes to be vertically centered with spaces/padding in between.

Currently, this code outputs my boxes to be spaced apart(with padding), but if I change to verticalArrangement = Arrangement.Center, it centers my boxes but removes the padding. Is there a way that I could have both?

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(1),
        verticalArrangement =  Arrangement.spacedBy(dimensionResource(R.dimen.padding_medium)),
        horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_large)),
        modifier = modifier
    ) {
        items(DataSource.topics) { topic ->
            TopicCard(topic)
        }
    }
}

Tried to change this into:

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(1),
        verticalArrangement =  Arrangement.Center,
        horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_large)),
        modifier = modifier
    ) {
        items(DataSource.topics) { topic ->
            TopicCard(topic)
        }
    }
}

But all this does is center my boxes without spacing them.
I've tried using spacers as well but doesn't seem to work for me.

Expected result,

0

There are 0 best solutions below