Dropdown menu:
We are going to use DropdownMenu Composable for creating dropdown menu.
fun DropdownMenu(
expanded: Boolean,
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
offset: DpOffset = DpOffset(0.dp, 0.dp),
properties: PopupProperties = PopupProperties(focusable = true),
content: @Composable ColumnScope.() -> Unit
)
In Above code if expanded is true, the popup menu with dropdown content will be shown.
onDismissRequest will be called when the menu should be dismiss,
@Composable
fun DropdownDemo() {
var expanded by remember { mutableStateOf(false) }
val items = listOf(
"Apple", "Banana", "Cherry", "Grapes",
"Mango", "Pineapple", "Pear"
)
var selectedIndex by remember { mutableStateOf(0) }
Column(
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.TopStart)
.padding(all = 5.dp)
) {
Text(
items[selectedIndex],
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = { expanded = true })
.background(
Color.Red
),
color = Color.White,
fontSize = 20.sp,
textAlign = TextAlign.Start
)
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier
.fillMaxWidth()
.background(
Color.Gray
)
) {
items.forEachIndexed { index, s ->
DropdownMenuItem(onClick = {
selectedIndex = index
expanded = false
}) {
Text(text = s)
}
}
}
}
}Hope this will help someone.
Enjoy Coding.......... :)
