Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make ModalBottomSheetLayout always Expanded

I am using ModalBottomSheetLayout in Jetpack Compose. Whenever it is shown with modalBottomSheetState.show(), it shows HalfExpanded or Expanded depending on the height of its content. This is from the source code:

val anchors = if (sheetHeight < fullHeight / 2) {
        mapOf(
            fullHeight to Hidden,
            fullHeight - sheetHeight to Expanded
        )
    } else {
        mapOf(
            fullHeight to Hidden,
            fullHeight / 2 to HalfExpanded,
            max(0f, fullHeight - sheetHeight) to Expanded
        )
    }
    Modifier.swipeable(
        state = sheetState,
        anchors = anchors,
        orientation = Orientation.Vertical,
        enabled = sheetState.currentValue != Hidden,
        resistance = null
    )

Then show() works like here:

 internal val isHalfExpandedEnabled: Boolean
    get() = anchors.values.contains(HalfExpanded)

/**
 * Show the bottom sheet with animation and suspend until it's shown. If half expand is
 * enabled, the bottom sheet will be half expanded. Otherwise it will be fully expanded.
 *
 * @throws [CancellationException] if the animation is interrupted
 */
suspend fun show() {
    val targetValue =
        if (isHalfExpandedEnabled) HalfExpanded
        else Expanded
    animateTo(targetValue = targetValue)
}

I wonder if we can set it to always Expanded somehow

like image 555
Marat Avatar asked Dec 10 '25 14:12

Marat


2 Answers

You can use:

scope.launch { state.animateTo(ModalBottomSheetValue.Expanded) }

instead of

scope.launch { state.show() }

Starting with compose 1.2 you can use the skipHalfExpanded attribute:

skipHalfExpanded : If true, the sheet will always expand to the Expanded state and move to the Hidden state when hiding the sheet, either programmatically or by user interaction

Something like:

var skipHalfExpanded by remember { mutableStateOf(true) }
val state = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = skipHalfExpanded
)
like image 57
Gabriele Mariotti Avatar answered Dec 12 '25 02:12

Gabriele Mariotti


use:

bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)

to show expanded sheet

use confirmStateChange:

 val bottomSheetState =
        rememberModalBottomSheetState(ModalBottomSheetValue.Hidden, confirmStateChange = {
            it != ModalBottomSheetValue.HalfExpanded
        })

to avoid sheet halfexpanded

like image 42
Notsfsssf Avatar answered Dec 12 '25 03:12

Notsfsssf



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!