Jetpack Compose version: 2.0.20

Material Library Version (M2, M3 or Both?): M3

Material Compose component used: ModalBottomSheet

Android Studio Build: #AI-241.18034.62.2412.12266719

Kotlin version: 2.0.20

The new ModalBottomSheet API is great in simple use cases like the first example in the documentation. Unfortunately it gets overcomplicated and error-prone when a developer wants to control showing/hiding of the bottoms sheet programmatically (like second example in the documentation).

The state of the bottom sheet is controlled by 2 independent variables and it's easy for developer to get them to the inconsistent state.

The problem

If developer forgets to write this code in every place where they hide the bottom sheet

scope.launch { sheetState.hide() }.invokeOnCompletion {
    if (!sheetState.isVisible) {
        showBottomSheet = false
    }
}

and just calls sheetState.hide() they end up with the unresponsive screen (blocked by bottoms sheet that they don't see).

Proposed solution

ModalBottomSheet should not block the screen after it's dismissed even if it remains in composition. There should be no need for showBottomSheet when ModalBottomSheet is used with hoisted state. It should be fully controlled by the state. Here is a draft showing what the second example could look like after simplifying the API.

val sheetState = rememberModalBottomSheetState(
    initalTargetState = Hide, // new param indicating that we don't want the bottom sheet to open as soon as it's added to composition
)
val scope = rememberCoroutineScope()
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = { scope.launch { sheetState.show() } }
        )
    }
) { contentPadding ->
    // Screen content

    ModalBottomSheet(
        onDismissRequest = {
            sheetState.reuse() // if needed we may add a method to indicate that the state can be reused
        },
        sheetState = sheetState
    ) {
        // Sheet content
        Button(onClick = {
            scope.launch { sheetState.hide() }
        }) {
            Text("Hide bottom sheet")
        }
    }
}

Please let me know if this is and API change you would consider. I could implement it and create a PR.

Issue 372395679

Links (1)

Issue metadata