Hi everyone! How can we give margin between items ...

# compose

[KotlinLeaner]

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
            )
        }
    }
}

[Yves Kalume]

you can use verticalArrangement like :

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

[KotlinLeaner]

Thank you so much

[KotlinLeaner]

@Yves Kalume my shape not working also

[KotlinLeaner]

never mind it works

[Yves Kalume]

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

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

[John Nichol]

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

[KotlinLeaner]

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

[KotlinLeaner]

thank you @Yves Kalume it works

[Yves Kalume]

And I can suggest you to use LazyColumn instead of Column https://foso.github.io/Jetpack-Compose-Playground/foundation/lazycolumn/

[KotlinLeaner]

I am using nested LazyColumn that's why I am using column