BottomSheetScaffold

Common/AllAndroid/JVM

Functions summary

Unit

@Composable BottomSheetScaffold(     sheetContent: @Composable ColumnScope.() -> Unit,     modifier: Modifier,     scaffoldState: BottomSheetScaffoldState,     topBar: (@Composable () -> Unit)?,     snackbarHost: @Composable (SnackbarHostState) -> Unit,     floatingActionButton: (@Composable () -> Unit)?,     floatingActionButtonPosition: FabPosition,     sheetGesturesEnabled: Boolean,     sheetShape: Shape,     sheetElevation: Dp,     sheetBackgroundColor: Color,     sheetContentColor: Color,     sheetPeekHeight: Dp,     backgroundColor: Color,     contentColor: Color,     content: @Composable (PaddingValues) -> Unit ) Material Design standard bottom sheet

Cmn

Functions

BottomSheetScaffold

Cmn

Artifact: androidx.compose.material:material

View Source

@Composable
fun BottomSheetScaffold(
    sheetContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
    topBar: (@Composable () -> Unit)? = null,
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: (@Composable () -> Unit)? = null,
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    sheetGesturesEnabled: Boolean = true,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = BottomSheetScaffoldDefaults.SheetElevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    sheetPeekHeight: Dp = BottomSheetScaffoldDefaults.SheetPeekHeight,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
): Unit

Material Design standard bottom sheet

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.

This component provides an API to put together several material components to construct your screen. For a similar component which implements the basic material design layout strategy with app bars, floating action buttons and navigation drawers, use the standard Scaffold. For similar component that uses a backdrop as the centerpiece of the screen, use BackdropScaffold.

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

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.BottomSheetScaffold
import androidx.compose.material.Button
import androidx.compose.material.FabPosition
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.rememberBottomSheetScaffoldState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState()
BottomSheetScaffold(
    sheetContent = {
        Box(Modifier.fillMaxWidth().height(128.dp), contentAlignment = Alignment.Center) {
            Text("Swipe up to expand sheet")
        }
        Column(
            Modifier.fillMaxWidth().padding(64.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Text("Sheet content")
            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { scaffoldState.bottomSheetState.collapse() } }) {
                Text("Click to collapse sheet")
            }
        }
    },
    scaffoldState = scaffoldState,
    topBar = { TopAppBar { Text("Bottom sheet scaffold") } },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        FloatingActionButton(
            onClick = {
                // show snackbar as a suspend function
                scope.launch {
                    scaffoldState.snackbarHostState.showSnackbar("Snackbar #${++clickCount}")
                }
            }
        ) {
            Icon(Icons.Default.Favorite, contentDescription = "Localized description")
        }
    },
    floatingActionButtonPosition = FabPosition.End,
    sheetPeekHeight = 128.dp,
) { innerPadding ->
    LazyColumn(contentPadding = innerPadding) {
        items(100) {
            Box(Modifier.fillMaxWidth().height(50.dp).background(colors[it % colors.size]))
        }
    }
}

Parameters
sheetContent: @Composable ColumnScope.() -> Unit	The content of the bottom sheet.
modifier: Modifier = Modifier	An optional Modifier for the root of the scaffold.
scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState()	The state of the scaffold.
topBar: (@Composable () -> Unit)? = null	An optional top app bar.
snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }	The composable hosting the snackbars shown inside the scaffold.
floatingActionButton: (@Composable () -> Unit)? = null	An optional floating action button.
floatingActionButtonPosition: FabPosition = FabPosition.End	The position of the floating action button.
sheetGesturesEnabled: Boolean = true	Whether the bottom sheet can be interacted with by gestures.
sheetShape: Shape = MaterialTheme.shapes.large	The shape of the bottom sheet.
sheetElevation: Dp = BottomSheetScaffoldDefaults.SheetElevation	The elevation of the bottom sheet.
sheetBackgroundColor: Color = MaterialTheme.colors.surface	The background color of the bottom sheet.
sheetContentColor: Color = contentColorFor(sheetBackgroundColor)	The preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for sheetBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.
sheetPeekHeight: Dp = BottomSheetScaffoldDefaults.SheetPeekHeight	The height of the bottom sheet when it is collapsed. If the peek height equals the sheet's full height, the sheet will only have a collapsed state.
backgroundColor: Color = MaterialTheme.colors.background	The background color of the scaffold body.
contentColor: Color = contentColorFor(backgroundColor)	The color of the content in scaffold body. Defaults to either the matching content color for backgroundColor, or, if it is not a color from the theme, this will keep the same value set above this Surface.
content: @Composable (PaddingValues) -> Unit	The main content of the screen. You should use the provided PaddingValues to properly offset the content, so that it is not obstructed by the bottom sheet when collapsed.