How to make Material3 ModalBottomSheet non-draggable while keeping internal content scrollable in Jetpack Compose?

1 day ago 1
ARTICLE AD BOX

Description

I am using Material3 ModalBottomSheet in Jetpack Compose and I want to place a scrollable list inside it.

The problem is that there seems to be a gesture conflict between the scrollable content inside the bottom sheet and the swipe/drag gesture of the ModalBottomSheet itself. When the user scrolls or drags down inside the sheet, the bottom sheet starts moving as well.

I was able to solve this by creating a custom bottom sheet component, but I would prefer to avoid that if possible.

Is there any way to make Material3 ModalBottomSheet non-draggable, while still allowing the content inside it to be scrollable?

Attempts to solve

I tried using confirmValueChange:

val sheetState = rememberModalBottomSheetState( skipPartiallyExpanded = true, confirmValueChange = { newValue -> newValue != SheetValue.Hidden } ) ModalBottomSheet( sheetState = sheetState, onDismissRequest = {}, dragHandle = null ) { Content() }

This prevents the sheet from being hidden, but it does't disable the drag animation itself. The sheet can still be dragged/swiped down slightly and then snaps back.

What I want is to completely disable the swipe/drag behavior of ModalBottomSheet, so that only the internal scrollable list handles vertical gestures.

Read Entire Article