Home > Software engineering >  How to center text inside DropdownMenuItem in compose
How to center text inside DropdownMenuItem in compose

Time:03-01

Currently, when I create a DropdownMenu it always shows the text to the start. I want it to be centered and didn't find any resource that answers that.

CodePudding user response:

The drop down item takes a composable, you can use a Box and set the content alignment to center

    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = Modifier.fillMaxWidth())
    ) {
        items.forEachIndexed { index, s ->
            DropdownMenuItem(onClick = {
                selectedIndex = index
                expanded = false
            }) {
                val disabledText = if (s == disabledValue) {
                    " (Disabled)"
                } else {
                    ""
                }
                Box(contentAlignment = Alignment.Center) {
                    Text(text = s   disabledText)
                }
            }
        }
    }
  • Related