How to put bottom sheet ui of jetpack compose on the top of custom bottom navigation bar and it should be draggable?

Question

Hello I am using material 3 bottom sheet in jetpack compose (I cannot show whole code or images due to security issues)

Here is a partial code of bottom navhost

  val navController = rememberNavController()
    Scaffold(
        bottomBar = {
            Column() {

                NavigationBarComponent(navController = navController)

            }

        }
    ) { innerPadding ->
        Background {
            EVBackground {

Now I call the bottom sheet from above the scaffold.

 BottomSheetUi()

    val navController = rememberNavController()
    Scaffold(
        bottomBar = {
            Column() {

                NavigationBarComponent(navController = navController)

            }

My issue is that the bottom sheet is stuck to the very bottom of the screen and the navhost navbar gets hidden by it. I want the bottom sheet to start above it and collapse with drag handle. So the offset should be just above the bottom nav bar. Any help would be appreciated. Thank you.

Answer 1

I have managed to achieve it using Scaffold with a nested BottomSheetScaffold.

    val scaffoldSheetState = rememberBottomSheetScaffoldState()
    val scope = rememberCoroutineScope()
    Scaffold(
        bottomBar = {...},
    ) { innerPadding ->
        // 40.dp for the drag handle
        val bottomPadding = innerPadding.calculateBottomPadding() + 40.dp
        BottomSheetScaffold(
            scaffoldState = scaffoldSheetState,
            sheetPeekHeight = bottomPadding,
            modifier = Modifier.padding(innerPadding),
            sheetContent = {
                Column(
                    Modifier
                        .padding(bottom = bottomPadding)
                        .fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text("Sheet content")
                    Spacer(Modifier.height(20.dp))
                    Button(onClick = {
                        scope.launch { scaffoldSheetState.bottomSheetState.partialExpand() }
                    }) {
                        Text("Hide bottom sheet")
                    }
                    Button(onClick = { }) {
                        Text("Some button")
                    }
                }
            },
        ) {
            Column(
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text(text = "Main content")
            }
        }
    }