Compose BottomSheetScaffold with sheet top margin

Question

I was playing around with BottomSheetScaffold and could't figure out how to set a top margin / min offset / anchor for the sheet.

Setting up the sheet like this:

val scaffoldState = rememberBottomSheetScaffoldState()
BottomSheetScaffold(
    sheetContent = {
        LazyColumn(modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
        ) {
            items(100) {
                Text(text = "Sheet item $it")
                Spacer(modifier = Modifier.height(10.dp))
            }
        }
    },
    scaffoldState = scaffoldState,
    sheetPeekHeight = 100.dp,
    sheetShape = RoundedCornerShape(10.dp),
    sheetBackgroundColor = Color.Gray
) { innerPadding ->
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
            .background(Color.Green),
        contentAlignment = Alignment.Center
    ) { Text(text = "Content") }
}

Results in this bottom sheet in the app:

Collapsed:

Expanded:

What I am looking for is to add a top margin for the sheet so that it doesn't expand more than to this state.

I know I could add a height to the sheet content, but then i had to calculate height = windowHeight - bottomNavHeight - sheetTopMargin and that just feels more complicated that it should be.

Is there any easier way to set the top sheet margin?

user_3005136 · Answer

We used a ModalBottomSheetLayout and provided the maximum height as a factor of screen space to the modifier of the sheetContent composable:

sheetContent = {
    DatesFilterSheet(
        modifier = Modifier.fillMaxHeight(0.9f)
    )
}

https://i.stack.imgur.com/wZKnO.png

user_17258709 · Answer

Currently there is no easier way to do this, you could try to set a Column around your lazy column with a spacer before, which is only shown when the sheetState is Expanded. If you leave it when it's collapsed then there is a white gap at the bottom.

In addition you need to set the sheetBackgroundColor to Transparent and use Color.grey on your LazyColumn

Compose BottomSheetScaffold with sheet top margin

2 Answers