Trying to recreate this. Having 2 issues: 1. I don't know how to get the permanent bottomSheet to ha...

# compose

[Colton Idle]

Trying to recreate this. Having 2 issues:
1. I don't know how to get the permanent bottomSheet to have a set weight/percentage based height.
2. My rounded corners on the bottom sheet end up white.
Code and current screenshot in thread.

[Colton Idle]

Current:

[Colton Idle]

Code

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun BottomSheetScaffoldSample() {
    val scope = rememberCoroutineScope()
    val scaffoldState = rememberBottomSheetScaffoldState()
    BottomSheetScaffold(
        modifier = Modifier.fillMaxSize(),
        sheetContent = {
            Surface(
                color = Color.Blue,
                shape = RoundedCornerShape(topStart = 48.dp, topEnd = 48.dp),
                modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
            ) {
                Text("Swipe up to expand sheet")
            }
        },
        scaffoldState = scaffoldState,
        sheetPeekHeight = 128.dp, //Any way to set this to be percentage based?
    ) { innerPadding ->
        Column {
            Box(
                modifier = Modifier
                    .background(Color(0xffFFF2CC))
                    .weight(.7f)
                    .fillMaxWidth()
            )
            Box(
                modifier = Modifier
                    .background(Color.Magenta)
                    .weight(.3f)
                    .fillMaxWidth()
            )
        }
    }
}

[Alexandru Hadăr]

Hey, i have a question: does the bottom.sheet work when collapse? Does it pass the clicks further down?
In my experience with it, since beta04, when ypu first click on it it expands and only after you can interact with the items inside it.

[Colton Idle]

I don't have any interactions in the bottom sheet at the moment, so I can't comment on that (yet).

[Vadzim Filipovich]

Did you tried to use box with image aligned to top and bottom sheet aligned to the bottom?

[Colton Idle]

Currently it is aligned to top and to bottom. My problem is that I don't know how to size the bottom sheet to be percentage based.

[Vadzim Filipovich]

Huh, i just missed your code snippet, sorry

[Vadzim Filipovich]

Height of the screen or height of parent component?

[Colton Idle]

Whatever sheetPeekHeight uses.

sheetPeekHeight = 128.dp, //Any way to set this to be percentage?

[Vadzim Filipovich]

Could you calculate container height and just multiply by 0.35?

[Halil Ozercan]

Have u tried wrapping BottomSheetScaffold with BoxWithConstraints?

It should give you maxHeight which you can use to calculate a peekHeight for your bottomSheet

[Colton Idle]

Considered but read on here that it's slightly more expensive so curious if I'm just missing some other apis available to me.