When to use Material3 Bottom Sheet
- As the name indicates it's a sheet that slides from the bottom.
- The user can click outside and it will dismiss and it can be dismissed by sliding the sheet to the bottom.
-
BottomSheetScaffold -> Expands to maximum content with overlay scrolling.
-
ModalBottomSheet -> Expands to half of the screen with the additional ability to expand to fill the screen as scrolling.
Light Theme |
Dark Theme |
 |
 |
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScreenContent(modifier: Modifier = Modifier) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
val coroutineScope = rememberCoroutineScope()
// For -> ModalBottomSheet
val sheetState = rememberModalBottomSheetState()
var isSheetOpen by rememberSaveable { mutableStateOf(false) }
// For -> BottomSheetScaffold
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState()
BottomSheetScaffold(
scaffoldState = bottomSheetScaffoldState,
sheetContent = {
BottomSheetContent()
},
sheetPeekHeight = 0.dp
) {
// ---------> Entire screen content --------->
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Button(onClick = {
coroutineScope.launch {
isSheetOpen = true
}
}) {
Text(text = "Modal Bottom Sheet")
}
Button(onClick = {
coroutineScope.launch {
bottomSheetScaffoldState.bottomSheetState.expand()
}
}) {
Text(text = "Bottom Sheet Scaffold")
}
}
}
// ---------> Entire screen content --------->
// For :-> ModalBottomSheet :-> We need a boolean state to handle the open/close dstates
if (isSheetOpen) {
ModalBottomSheet(
sheetState = sheetState,
onDismissRequest = {
coroutineScope.launch {
isSheetOpen = false
sheetState.hide()
}
}
) {
BottomSheetContent()
}
}
}
}
}
@Composable
fun BottomSheetContent() {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp)
) {
items(4) { currentNumber ->
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(vertical = 25.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Text(
"Current Row -> $currentNumber",
style = MaterialTheme.typography.titleMedium
)
}
}
}
}