spark/com.adevinta.spark.components.bottomsheet

Package-level declarations

BottomSheet A bottom sheet is a UI component commonly used in mobile applications to present additional content or options from the bottom of the screen. It is a modal component that slides up from the bottom of the screen and covers the entire screen.

BottomSheet

fun BottomSheet(
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    showHandle: Boolean = true,
    contentTopPadding: Dp, ,
    sheetState: SheetState = rememberModalBottomSheetState(),
    content = {
        Text(
            text = "BottomSheet Content",
            modifier = Modifier.fillMaxWidth().padding(16.dp),
        )
    }
)

BottomSheet content with / No handle Example

The showHandle parameter controls whether a drag handle is shown at the top of the sheet. When contentTopPadding is set to 0.dp, content can extend behind the handle.

BottomSheet content behind handle Example

fun BottomSheet(
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    showHandle: Boolean = true,
    contentTopPadding = 0.dp,
    sheetState: SheetState = rememberModalBottomSheetState(),
    content = {
        Box(
            contentAlignment = Alignment.TopCenter,
        ) {
            Image(
                modifier = Modifier
                    .height(500.dp)
                    .fillMaxWidth(),
                model = "https://upload.wikimedia.org/wikipedia/commons/f/fd/Pink_flower.jpg",
                contentScale = ContentScale.Crop,
                contentDescription = null,
            )
        }
    }
)

BottomSheetScaffold

fun BottomSheetScaffold(
    sheetContent = {
    Text(
        text = "Sheet Content",
        modifier = Modifier.fillMaxWidth().padding(16.dp),
    )
},
    content = {
        Text(
            text = "Screen Content",
            modifier = Modifier.fillMaxWidth().padding(16.dp),
        )
    },
    modifier: Modifier = Modifier,
    scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
    showHandle: Boolean = true,
    sheetContentTopPadding: Dp = if (showHandle) ContentTopPadding else ContentTopPaddingNoHandle,
    screenContentPadding: Dp = ContentTopPadding,
    sheetSwipeEnabled: Boolean = true,
    topBar: @Composable (() -> Unit)? = null,
    snackbarHost: @Composable (androidx.compose.material3.SnackbarHostState) -> Unit,
)

Functions

BottomSheet

@Composable

fun BottomSheet(onDismissRequest: () -> Unit, modifier: Modifier = Modifier, sheetState: SheetState = rememberModalBottomSheetState(), dragHandle: @Composable () -> Unit? = { DragHandle() }, applyTempStatusBarPadding: Boolean = false, content: @Composable ColumnScope.() -> Unit)

Modal bottom sheets are used as an alternative to inline menus or simple dialogs on mobile, especially when offering a long list of action items, or when items require longer descriptions and icons. Like dialogs, modal bottom sheets appear in front of app content, disabling all other app functionality when they appear, and remaining on screen until confirmed, dismissed, or a required action has been taken.

DragHandle

@Composable

fun DragHandle(modifier: Modifier = Modifier, color: Color = SparkTheme.colors.outline.dim1)

The optional visual marker placed on top of a bottom sheet to indicate it may be dragged.