Bottom Sheet
Surfaces that slide up from the bottom of the screen.
Properties
Preview
Generated Code
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyBottomSheet() {
val sheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = false
)
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Button(onClick = { showBottomSheet = true }) {
Text("Show bottom sheet")
}
if (showBottomSheet) {
ModalBottomSheet(
onDismissRequest = {
showBottomSheet = false
},
sheetState = sheetState,
dragHandle = { BottomSheetDefaults.DragHandle() },
) {
// Sheet content
Column(modifier = Modifier.padding(16.dp).fillMaxWidth()) {
Text("Comments", style = MaterialTheme.typography.titleLarge)
Spacer(modifier = Modifier.height(16.dp))
Text("This looks great! Can we change the color scheme?")
Spacer(modifier = Modifier.height(16.dp))
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {
scope.launch { sheetState.hide() }.invokeOnCompletion {
if (!sheetState.isVisible) {
showBottomSheet = false
}
}
}
) {
Text("Close bottom sheet")
}
}
}
}
}