How to expand BottomSheetScaffold to a specific height at with Jetpack Compose?

Question

Is there a way to expand the BottomSheetScaffold to a specific height?

The content of my BottomSheetScaffold is a big list so it expands to fullscreen. I did not find a way to always expand to a specific height, regardless of the content.

Answer 1

You can use heightIn(min = 100.dp, max = 500.dp) on sheetContent as

   val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetElevation = 8.dp,
        sheetShape = RoundedCornerShape(
            bottomStart = 0.dp,
            bottomEnd = 0.dp,
            topStart = 12.dp,
            topEnd = 12.dp
        ),
        sheetContent = {
            SheetContent()
        },
        // This is the height in collapsed state
        sheetPeekHeight = 70.dp
    ) {
        MainContent(bottomSheetScaffoldState.bottomSheetState)
    }

@Composable
private fun SheetContent() {
    Column(modifier = Modifier.heightIn(min = 100.dp, max = 500.dp)) {
        Spacer(modifier = Modifier.height(16.dp))

        Text(
            text = "Places to Visit",
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold,
            color = Color(0xffFDD835),
            fontSize = 24.sp,
            modifier = Modifier.padding(8.dp)
        )
        LazyColumn(
            contentPadding = PaddingValues(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(places) { place ->
                PlacesToBookVerticalComponent(place = place)
            }
        }
    }
}

And if interested to see states and scroll positions you can check out them with

@ExperimentalMaterialApi
@Composable
private fun MainContent(bottomSheetState: BottomSheetState) {

    val direction = bottomSheetState.direction
    val currentValue: BottomSheetValue = bottomSheetState.currentValue
    val targetValue: BottomSheetValue = bottomSheetState.targetValue
    val overflow = bottomSheetState.overflow.value
    val offset = bottomSheetState.offset.value

    val progress = bottomSheetState.progress
    val fraction = progress.fraction
    val from = progress.from.name
    val to = progress.to.name

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xff6D4C41))
            .padding(top = 30.dp)
    ) {
        Text(
            color = Color.White,
            text = "direction:$direction\n" +
                    "isExpanded: ${bottomSheetState.isExpanded}\n" +
                    "isCollapsed: ${bottomSheetState.isCollapsed}\n" +
                    "isAnimationRunning: ${bottomSheetState.isAnimationRunning}"
        )

        Text(
            color = Color.White,
            text = "currentValue: ${currentValue}\n" +
                    "targetValue: ${targetValue}\n" +
                    "overflow: ${overflow}\n" +
                    "offset: $offset"
        )

        Text(
            color = Color.White,
            text = "progress: $progress\n" +
                    "fraction: ${fraction}\n" +
                    "from: ${from}\n" +
                    "to: $to"
        )
    }
}