android jetpack compose flowrow vertical spacing

Question

so i have a Flowrow in jetpack compose:

FlowRow(
                            horizontalArrangement = Arrangement.spacedBy(5.dp),
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(bottom = 10.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            WoodEssences.values.forEach() { essence ->
                                Box(
                                    modifier = Modifier
                                        .border(
                                            1.dp,
                                            Color.Gray,
                                            RoundedCornerShape(5.dp)
                                        )
                                        .padding(5.dp)
                                        .width(boxWidth)
                                ) {

                                    Row(
                                        verticalAlignment = Alignment.CenterVertically
                                    ) {
                                        Text(
                                            text = essence.letter_id,
                                            style = MaterialTheme.typography.bodyMedium,
                                            fontSize = 18.sp
                                        )
                                        Checkbox(
                                            checked = essenceCheckbox[essence.num_id]!!,
                                            onCheckedChange = {
                                                essenceCheckbox[essence.num_id] = it
                                            },
                                            colors = CheckboxDefaults
                                                .colors(
                                                    checkedColor = editIconColor
                                                )
                                        )
                                    }
                                }
                                Spacer(modifier = Modifier.width(5.dp))
                            }
                        }

This gave me this result:

i would like to add a spacing between each row but can't find exactly how.

Is anyone of you could help me with that

Thank you

Answer 1

FlowRow(
    verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically)
)

Answer 2

We can try to wrap the Box with one more Box with top padding

 Box(modifier = Modifier.padding(top = 10.dp)) {
                Box(
                    modifier = Modifier
                        .border(
                            1.dp,
                            Color.Gray,
                            RoundedCornerShape(5.dp),
                        )
                        .padding(5.dp)
                        .width(120.dp),
                ) {
                  .......