Hi all! I have full-screen BottomSheetScaffold content and I want to make it scrollable inside the b...

# compose

[mertceyhan]

Hi all! I have full-screen BottomSheetScaffold content and I want to make it scrollable inside the bottom sheet. I’ve seen this custom implementation but is there any support from the framework itself?

[mertceyhan]

https://miro.medium.com/max/794/1*pcqyKlenZjgZAI_J7kF7wQ.gif▾

[ste]

Well, I don't know if it can be achieved with material's BottomSheet, however I created my own component which handles that (see video).

Basically, you need to use a NestedScrollConnection object to detect when the top bound is reached: if so, the next drags will control the bottom sheet offset

ScreenRecord-20220520-201125.mp4

[ste]

For instance, this is the logic I use

CollapsableLayout.kt

[mertceyhan]

I’ll try that, thank you 🙏

[jossiwolf]

@mertceyhan So you want the sheet to behave like in Ste's video example?

[lesincs]

I think you can achieve that just based on BottomSheetScaffold , just giving the root composable of sheetContent a Modifier.verticalScroll() should work

[mertceyhan]

Hey @jossiwolf! That’s right. I need to scrollable layout inside of a BottomSheetScaffold ’s content

[mertceyhan]

Hey @lesincs! I think this is not that easy. BottomSheetScaffold itself scrollable too. If you add verticalScroll() to the content’s modifier, you will get a crash because of the nested scroll.

[lesincs]

Did you try it? I have the same scenario in my project, and it works like a charm, not only does it not crash, but it also has good scroll propagation.

[mertceyhan]

This works, but there is a crash on BottomSheetScaffold

ModalBottomSheetLayout(
    modifier = Modifier.fillMaxSize(),
    sheetState = sheetState,
    sheetContent = {
        Column(modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())) {
        }
    })

[lesincs]

I didn’t get crash, the version is 1.1.1🤣