Can we add bottom padding to Material3 ModalBottomSheet in Jetpack Compose?

Question

I was wondering if it was possible to add some spacing between the navigation bar and my ModalBottomSheet or do I have to use some other composable ?

Here's my code.

I've tried to add bottom padding in the modifier but it's not adding any space while top padding make the bottom sheet overlap on the navigation bar.

    ModalBottomSheet(
        modifier = Modifier.padding(horizontal = MaterialTheme.spacing.small), // bottom padding doesn't work here
        shape = MaterialTheme.shapes.extraLarge,
        onDismissRequest = onDismiss,
        sheetState = modalBottomSheetState,
        dragHandle = { BottomSheetDefaults.DragHandle() },
    ) {
        
    }

Here's the result

Thanks in advance for any help.

Answer 1

I found a workaround using BoxWithConstraint with some padding and using containerColor = Color.Transparent. I also set the insets to windowInsets = WindowInsets(0, 0, 0, 0) so the scrim is applied to the whole screen:

ModalBottomSheet(
    modifier = Modifier.padding(horizontal = MaterialTheme.spacing.small),
    shape = MaterialTheme.shapes.extraLarge,
    onDismissRequest = onDismiss,
    sheetState = modalBottomSheetState,
    containerColor = Color.Transparent,
    dragHandle = null,
    windowInsets = WindowInsets(0, 0, 0, 0)
) {
    BoxWithConstraints(
        Modifier
            .navigationBarsPadding()
            .padding(bottom = 10.dp)
    ) {
        // Content here
    }
}