Material 3 Bottom Sheets in Jetpack Compose

Get started with Material 3 bottom sheets in Jetpack Compose to create user-friendly interfaces for displaying content at the bottom of the screen.

Explore Bottom Sheet Styles

Learn to implement two Material 3 bottom sheet types for displaying content.

Standard Bottom Sheet

Shows a persistent bottom sheet.

@Composable
fun StandardBottomSheetExample() {
    // Creates a persistent bottom sheet with static content
    BottomSheetScaffold(
        scaffoldState = rememberBottomSheetScaffoldState(), // *Required: Manages sheet state
        sheetContent = {
            Text("This is a standard bottom sheet") // *Required: Defines sheet content
        }
    ) {
        // Screen content
        Text("Main content")
    }
}
  

Use a Standard Bottom Sheet when you want to show a persistent bottom sheet alongside main content.

Examples:

• Show playback controls in a music app
• Display a navigation menu in a maps app
• Present settings options in a video player

---

Modal Bottom Sheet

Shows a dismissible bottom sheet.

@Composable
fun ModalBottomSheetExample() {
    // Creates a simple bottom sheet with static content
    ModalBottomSheet(
        onDismissRequest = { /* Handle dismiss */ } // *Required: Executes when the sheet is dismissed
    ) {
        Text("This is a modal bottom sheet") // *Required: Defines sheet content
    }
}
  

Use a Modal Bottom Sheet when you want to show temporary content that can be dismissed.

Examples:

• Show a quick message in a chat app
• Display a confirmation dialog in a form
• Present a menu in a navigation flow

---

Bottom Sheet Properties

Understand the key properties used in the bottom sheet examples.

Property	Usage
onDismissRequest*	Required (Modal): Executes when the modal bottom sheet is dismissed
content*	Required (Modal): Defines the modal bottom sheet’s content, like Text
scaffoldState	Manages the standard bottom sheet’s state using rememberBottomSheetScaffoldState
sheetContent*	Required (Standard): Defines the standard bottom sheet’s content, like Text