onesector
onesector

Reputation: 444

How can I set a minimum height for my BottomSheet that is equal to the PartiallyExpanded dimensions?

i have a code for my BottomSheet:

@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun BottomSheet(
    modifier: Modifier = Modifier,
    isBottomSheetVisible: Boolean,
    sheetState: SheetState,
    shape: Shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
    onDismiss: () -> Unit,
    content: @Composable ColumnScope.() -> Unit
) {
    if (isBottomSheetVisible) {
        ModalBottomSheet(
            modifier = modifier,
            onDismissRequest = onDismiss,
            sheetState = sheetState,
            tonalElevation = 0.dp,
            shape = shape,
            dragHandle = null,
            windowInsets = WindowInsets(0, 0, 0, 0)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 16.dp, end = 16.dp, bottom = 30.dp)
                    .navigationBarsPadding()
                    .animateContentSize()
            ) {
                Spacer(modifier = Modifier.height(10.dp))
                Box(
                    modifier = Modifier
                        .size(height = 4.dp, width = 32.dp)
                        .clip(RoundedCornerShape(100.dp))
                        .background(almaColorPalette.neutral4)
                        .align(alignment = Alignment.CenterHorizontally)
                )
                Spacer(modifier = Modifier.height(15.dp))
                content()
            }
        }
    }
}

On a Screen:

val sheetState = rememberModalBottomSheetState()

There is a skipPartiallyExpanded parameter inside the rememberModalBottomSheetState method. In this case, this value will be false, but this is not so important. I'm generally interested in how the height for the PartiallyExpanded state is calculated (this is in the source code), since I want to set a minimum height for my BottomSheet that would be equal to the height of PartiallyExpanded

Upvotes: 0

Views: 42

Answers (1)

BenjyTec
BenjyTec

Reputation: 10887

When looking into the ModalBottomSheet.kt file, you will find the following code:

val fullHeight = constraints.maxHeight.toFloat()
val newAnchors = DraggableAnchors {
    Hidden at fullHeight
    if (
        sheetSize.height > (fullHeight / 2) && !sheetState.skipPartiallyExpanded
    ) {
        PartiallyExpanded at fullHeight / 2f  // HERE
    }
    if (sheetSize.height != 0) {
        Expanded at max(0f, fullHeight - sheetSize.height)
    }
}

So, the PartiallyExpanded state is anchored to 50% of the screen height in case of the ModalBottomSheet.

You might also want to check out the BottomSheetScaffold. It has a sheetPeekHeight parameter where you can specify the exact height that you want for the PartiallyExpanded state.

Upvotes: 0

Related Questions