# BottomSheetScaffold

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomSheetScaffold.composable#BottomSheetScaffold(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.BottomSheetScaffoldState,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,kotlin.Boolean,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)( sheetContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, scaffoldState: https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomSheetScaffoldState, sheetPeekHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, sheetMaxWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, sheetShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, sheetContainerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, sheetContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, sheetTonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, sheetShadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, sheetDragHandle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, sheetSwipeEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, topBar: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, snackbarHost: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design standard bottom sheet scaffold](https://m3.material.io/components/bottom-sheets/overview) | Cmn |

## Functions

### BottomSheetScaffold

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/BottomSheetScaffold.kt+function:BottomSheetScaffold)

```
@Composable
@ExperimentalMaterial3Api
fun BottomSheetScaffold(
    sheetContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
    sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight,
    sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth,
    sheetShape: Shape = BottomSheetDefaults.ExpandedShape,
    sheetContainerColor: Color = BottomSheetDefaults.ContainerColor,
    sheetContentColor: Color = contentColorFor(sheetContainerColor),
    sheetTonalElevation: Dp = 0.dp,
    sheetShadowElevation: Dp = BottomSheetDefaults.Elevation,
    sheetDragHandle: (@Composable () -> Unit)? = { BottomSheetDefaults.DragHandle() },
    sheetSwipeEnabled: Boolean = true,
    topBar: (@Composable () -> Unit)? = null,
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    containerColor: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(containerColor),
    content: @Composable (PaddingValues) -> Unit
): Unit
```

[Material Design standard bottom sheet scaffold](https://m3.material.io/components/bottom-sheets/overview)

Standard bottom sheets co-exist with the screen's main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in main UI region is frequently scrolled or panned.

![Bottom sheet
image](https://developer.android.com/images/reference/androidx/compose/material3/bottom_sheet.png)

This component provides API to put together several material components to construct your screen, by ensuring proper layout strategy for them and collecting necessary data so these components will work together correctly.

A simple example of a standard bottom sheet looks like this:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.BottomSheet
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.Button
import androidx.compose.material3.SheetValue
import androidx.compose.material3.Text
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.unit.dp

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState()

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetPeekHeight = 128.dp,
    sheetContent = {
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
            Box(Modifier.fillMaxWidth().height(128.dp), contentAlignment = Alignment.Center) {
                Text("Swipe up to expand sheet")
            }
            Text("Sheet content")
            Button(
                modifier =
                    Modifier.padding(bottom = 64.dp).focusProperties {
                        // Make sure the button is not keyboard focusable when it's offscreen.
                        canFocus =
                            scaffoldState.bottomSheetState.currentValue == SheetValue.Expanded
                    },
                onClick = { scope.launch { scaffoldState.bottomSheetState.partialExpand() } },
            ) {
                Text("Click to collapse sheet")
            }
        }
    },
) { innerPadding ->
    Box(
        modifier = Modifier.fillMaxSize().padding(innerPadding),
        contentAlignment = Alignment.Center,
    ) {
        Text("Scaffold Content")
    }
}
```

| Parameters |
|---|---|
| `sheetContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of the bottom sheet |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to the root of the scaffold |
| `scaffoldState: https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomSheetScaffoldState = rememberBottomSheetScaffoldState()` | the state of the bottom sheet scaffold |
| `sheetPeekHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = BottomSheetDefaults.SheetPeekHeight` | the height of the bottom sheet when it is collapsed |
| `sheetMaxWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = BottomSheetDefaults.SheetMaxWidth` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` that defines what the maximum width the sheet will take. Pass in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp#Unspecified()` for a sheet that spans the entire screen width. |
| `sheetShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = BottomSheetDefaults.ExpandedShape` | the shape of the bottom sheet |
| `sheetContainerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = BottomSheetDefaults.ContainerColor` | the background color of the bottom sheet |
| `sheetContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = contentColorFor(sheetContainerColor)` | the preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#BottomSheetScaffold(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.BottomSheetScaffoldState,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,kotlin.Boolean,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)`, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet. |
| `sheetTonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | when `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#BottomSheetScaffold(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.BottomSheetScaffoldState,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,kotlin.Boolean,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)` is `https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme#surface()`, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: `https://developer.android.com/reference/kotlin/androidx/compose/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,kotlin.Function0)`. |
| `sheetShadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = BottomSheetDefaults.Elevation` | the shadow elevation of the bottom sheet |
| `sheetDragHandle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = { BottomSheetDefaults.DragHandle() }` | optional visual marker to pull the scaffold's bottom sheet |
| `sheetSwipeEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the sheet swiping is enabled and should react to the user's input |
| `topBar: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | top app bar of the screen, typically a `https://developer.android.com/reference/kotlin/androidx/compose/material3/TopAppBar.composable#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior,androidx.compose.foundation.layout.PaddingValues)` |
| `snackbarHost: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SnackbarHost(it) }` | component to host `https://developer.android.com/reference/kotlin/androidx/compose/material3/Snackbar.composable#Snackbar(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)`s that are pushed to be shown via `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState#showSnackbar(kotlin.String,kotlin.String,kotlin.Boolean,androidx.compose.material3.SnackbarDuration)`, typically a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)` |
| `containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colorScheme.surface` | the color used for the background of this scaffold. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Transparent()` to have no color. |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = contentColorFor(containerColor)` | the preferred color for content inside this scaffold. Defaults to either the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#BottomSheetScaffold(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.BottomSheetScaffoldState,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,kotlin.Boolean,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)`, or to the current `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LocalContentColor()` if `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#BottomSheetScaffold(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.BottomSheetScaffoldState,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,kotlin.Boolean,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)` is not a color from the theme. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | content of the screen. The lambda receives a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues` that should be applied to the content root via `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/padding.modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` to properly offset top and bottom bars. If using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)`, apply this modifier to the child of the scroll, and not on the scroll itself. |