A modern programming language that makes developers happier.

kotlinlang

Is there an easy way to display a collection of `DropdownMenuItem` s where one has a selection state (check mark)?

Not sure what you mean by easy but `DropdownMenuItem` has a content slot so you are free to put whatever you want on it based on state.

Do you have a mockup of what you are trying to achieve?

```enum class City(val title: String) {
    NewYork("New York"),
    London("London"),
    Paris("Paris"),
    Munich("Munich");
}

class MenuTestViewModel: ViewModel() {
    var city by mutableStateOf(City.London)
}

@Composable
fun MenuTest(viewModel: MenuTestViewModel = MenuTestViewModel()) {
    Scaffold (
        topBar = {
            TopAppBar(
                title = { Text(text = viewModel.city.title) },
                actions = {
                    OverflowMenu(viewModel = viewModel)
                }
            )
        }
    ) {
    }
}

@Composable
fun OverflowMenu(viewModel: MenuTestViewModel) {
    var expanded by remember { mutableStateOf(false) }
    
    Button(onClick = {
        expanded = true
    } ) {
        Icon(Icons.Filled.MoreVert, "")
        DropdownMenu(
            expanded = expanded, 
            onDismissRequest = { expanded = false }
        ) {
            City.values().forEach {
                DropdownMenuItem(
                    onClick = {
                        viewModel.city = it
                        expanded = false

                    }
                ) {
                    val alpha = if (it == viewModel.city) 1f else 0f
                    Icon(Icons.Filled.Check, "", modifier = Modifier.alpha(alpha))
                    Box(modifier = Modifier.width(8.dp))
                    Text(it.title)
                }
            }
        }
    }
}```


Your approach is a typical way to do it, albeit minor nits with using Box with width versus a Spacer. How do you feel about this approach?

I don’t like it. I can’t get a good layout inside the menu itself. Longer titles get wrapped and I don’t see how to control that. I couldn’t get `Spacer` to work at all. And it’s a total hack to have to set the alpha of the `Icon` in order to get the spacing of that right.

For the Check icon, you can use that alpha approach on the Icon, or use a conditional to hide/show within a Box. Either way, the Box or Icon should have a `Modifier.requiredSize(24.dp)` or whatever size you want. This should fix the title issues.

It seems the way DropdownMenuItem is implemented, the intrinsic size is not picking up that the Icon should always be some size. That is why the title is wrapping.

Turns out there's a known bug on the icon sizing specifically when used in DropdownMenu: <https://issuetracker.google.com/issues/198206454|https://issuetracker.google.com/issues/198206454>