BottomSheetScaffold usage

Question

I am new to this. But, I want a BottomSheetScaffold to display another view found in my file MailView.kt when I click on a button. I want the sheet hidden till the button is clicked.

But, (BottomSheetState(BottomSheetValue.Hidden) and sheetState in my code give an error I am not sure how to solve.

Cannot find a parameter with this name: sheetState

This material API is experimental and is likely to change or to be removed in the future.

Unresolved reference: Hidden

No value passed for parameter 'onClose'

This is the full code:

      var showBottomSheet by remember { mutableStateOf(false) }
    val scaffoldState = rememberBottomSheetScaffoldState()
    val scope = rememberCoroutineScope()

    if (showBottomSheet) {
        BottomSheetScaffold(
            sheetState = BottomSheetState(BottomSheetValue.Hidden),
            sheetContent = {
                MailView(onClose = { showBottomSheet = false })
            },
            content = {
                MailView()
            }
        )
    }

And this is how my button is set to work:

Button(
                                    onClick = { scope.launch { sheetState.show() } },
                                    colors = ButtonDefaults.buttonColors(
                                        containerColor = Color(
                                            0xffae52de
                                        )
                                    ),

UPDATE:

Based on recommended answer, I tried this for the BottomSheetScaffold:

val scope = rememberCoroutineScope()

val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = rememberStandardBottomSheetState(skipHiddenState = false))

  BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetContent = {
             MailView {
                scope.launch {
                    scaffoldState.bottomSheetState.hide()
                }
            })
        },
        content = {
            // Your main content
        },
        sheetPeekHeight = 0.dp // Ensure the sheet is hidden initially
    )

And this for the button:

Button(
    onClick = {
scope.launch {
scaffoldState.bottomSheetState.expand()
 }
}

But, it does not seem to trigger the sheet.

UPDATE:

I wanted to know how I can shift the content of the BottomSheetScaffold up a bit further to the top. The content seems to be positioned a little too low in the sheet for me.

Answer 1

You import the wrong version of rememberModalBottomSheetState. The material3 version takes a Boolean and returns a SheetState, but you need the androidx.compose.material.rememberModalBottomSheetState one.

Edit:

Here is an example with a button that shows bottom sheet on click.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Example() {
    val scope = rememberCoroutineScope()
    val scaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberStandardBottomSheetState(
            initialValue = PartiallyExpanded,
        ),
    )

    val hideBottomSheet: () -> Unit = {
        scope.launch { scaffoldState.bottomSheetState.partialExpand() }
    }

    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetContent = { MailView(hideBottomSheet) },
        sheetPeekHeight = 0.dp // Ensure the sheet is hidden instead of being partially expanded
    ) {
        Button(onClick = {
            scope.launch {
                scaffoldState.bottomSheetState.expand()
            }
        }) {
            Text("Show MailView")
        }
    }
}

@Composable
private fun MailView(onHide: () -> Unit) {
    Button(onClick = onHide) { Text("Hide") }
}