Hi everyone! How can we give margin between items in compose

Column(
    modifier = Modifier
        .fillMaxSize(),
) {
    val options = getOptions()
    options.forEachIndexed { _, optionText ->
        Card(
            shape = RoundedCornerShape(4.dp),
        ) {
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(OffWhite)
                    .padding(16.dp),
                text = optionText,
                style = Typography.h3,
                fontWeight = FontWeight.Medium,
                color = Slate
            )
        }
    }
}

you can use verticalArrangement like :

Column(
    modifier = Modifier
        .fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(margin.dp)
)

Thank you so much

I think you can try to add some horizontal padding to your items

Card(
    shape = RoundedCornerShape(4.dp),
    modifier = Modifier.padding(horizontal = 8.dp)
)

The solution given here is a good one for this use case - but also you have

Spacer

if you need it

If you use space than I need to check in the last item will not apply the

Spacer

And I can suggest you to use

LazyColumn

instead of

Column

https://foso.github.io/Jetpack-Compose-Playground/foundation/lazycolumn/

I am using nested

LazyColumn

that's why I am using

column