How to Reliably Detect BottomSheet State Changes in Jetpack Compose

Photo by Marvin Meyer on Unsplash

Here’s a simple scenario: You have a BottomSheetScaffold in Jetpack Compose, and you need to trigger an action when the bottom sheet is hidden. Seems straightforward, right? Well, it should be!

The problem is that while BottomSheetState has a currentValue property, it doesn't directly tell you when user interaction is complete. We want a callback for that moment.

Below, I’ll share a solution specifically for the Hidden state. You can adapt it for Expanded and PartiallyExpanded states as well. I've experimented with gestures and tracking bottom sheet states, but neither approach quite worked. (If you happen to know a simpler way, please share in the comments!)

What we have

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
  bottomSheetState = rememberStandardBottomSheetState(
    initialValue = SheetValue.Expanded,
  ),
)

BottomSheetScaffold(
  modifier = modifier,
  scaffoldState = bottomSheetScaffoldState,
  // ... ,
) {
  // ...
}

We only need the `bottomSheetState` and the power of Kotlin coroutines.

Solution

private const val DELAY_DRAGGING = 200L // this can be calibrated

var jobBottomSheetCollapsed: Job? = null…