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

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,
)

BottomSheetScaffold Example

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.