Dropdown Button/Wheel Picker/Spinner in Jetpack Compose

Question

Is there any standard implementation in Jetpack Compose for visual component like Spinner/Wheel Picker or Dropdown Button?

Iambic

Answer 1

You can use a Button with a DropdownMenu.
Something like:

var expanded by remember { mutableStateOf(false) }
val suggestions = listOf("Item1", "Item2", "Item3")

Button(onClick = { expanded = !expanded }){
    Text ("DropDown")
    Icon(
        imageVector = Icons.Filled.ArrowDropDown,
        contentDescription = null,
    )
}
DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
) {
    suggestions.forEach { label ->
        DropdownMenuItem(onClick = {
            expanded = false
            //do something ...
        }) {
            Text(text = label)
        }
    }
}

Gudrunguelderrose

I recommend wrapping the DropdownMenu in a Column or a Box – Solorzano

Answer 2

Yes, as @kc.dev commented, the button and the dropdownmenu better be in a box like the following. Otherwise, the popup will be in undesired position.

var expanded by remember { mutableStateOf(false) }
val suggestions = listOf("Item1", "Item2", "Item3")

Box {
    Button(onClick = { expanded = !expanded }){
        Text ("DropDown")
        Icon(
            imageVector = Icons.Filled.ArrowDropDown,
            contentDescription = null,
        )
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
    ) {
        suggestions.forEach { label ->
            DropdownMenuItem(onClick = {
                expanded = false
                //do something ...
            }) {
                Text(text = label)
            }
        }
    }
}

Maremma