Has anyone been able to get a good setup with List...

# compose

[bryankeltonadams]

Has anyone been able to get a good setup with ListDetail + Sheets? Like ideally it's a BottomSheet on mobile phones but then it's a ListDetail on tablet sizes? I'm trying to think through the foldable situation and I don't see how to support a List Detail setup with two separate screens side by side, and then having the phone fold closed and then having it be a Bottom Sheet experience.. i.e. drag handle and dismissable etc.

[bryankeltonadams]

The only thing I can think of is having the DetailScreen have a check for windowSize, and then if it's a phone size it will pop itself off and pass an argument back with it to tell the ListScreen to show the sheet version, but then you have the whole mess of the old screen potentially being visible for a bit, then waiting for the sheet to show etc..

[Ian Lake]

If you are using Navigation3, you could build a BottomSheetWhenSmallSceneStrategy that takes over that screen only on small screen devices (e.g., phones). Then Navigation3 will automatically handle swapping strategies as your screen size changes

[bryankeltonadams]

Nice! I'll have to look into that, that's probably more robust than what I have right now, right? 😛

fun DetailScreen(
    detailId: Int,
    sheetTrigger: MutableState<Int?>,
    onBack: () -> Unit,

    ) {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.COMPACT) {
        LaunchedEffect(Unit) {
            sheetTrigger.value = detailId
            onBack()
        }
    }

fun HomeScreen(
    sheetTrigger: State<Int?>,
    onNavigateToDetail: (Int) -> Unit
) {
    var showBottomSheet by remember { mutableStateOf(false) }
    var pendingDetailId by remember { mutableStateOf<Int?>(null) }

    LaunchedEffect(sheetTrigger.value) {
        if (sheetTrigger.value != null) {
            pendingDetailId = sheetTrigger.value
            showBottomSheet = true
        }
    }

[Ian Lake]

Yeah, I'd, uh, not recommend that code 😅

[bryankeltonadams]

Haha sounds good, I was surprised I got good behavior visually. When I close the Pixel 9 Pro Fold it'll automatically dismiss the detail screen and open the detail sheet version..

[Ian Lake]

Yeah, I suspect that the folding is covering up a lot of the not so great bits

[Ian Lake]

The nice part is the strategy approach also handles the unfold case too, which your code would need to also add additional work to do too

[bryankeltonadams]

Yeah good point, would basically have to do another LaunchedEffect when the window changes again and then navigate to the detail screen again.. I'm in the middle of getting the strategy built out, fingers crossed.

[Ian Lake]

Should be pretty straightforward to combine the BottomSheetSceneStrategy (WIP) with the windowSizeClass approach used by TwoPaneSceneStrategy

[bryankeltonadams]

I noticed the rememberListDetailSceneStrategy is a ThreePaneScaffoldScene, what's the third Pane in this context? Only asking because you mentioned utilizing the TwoPaneScene Strategy

[Ian Lake]

Oh, I just meant because you need to calculate the windowSizeClass outside of the SceneStrategy - something you'd need to do if you want your CompactBottomSheetSceneStrategy to only apply on phones and the easiest place to see that pattern is with what the TwoPane recipe does

[Ian Lake]

You'd still probably find it easier to just use Material3 adaptive's scene strategy for the two pane

[Ian Lake]

So you'd rememberCompactBottomSheetSceneStrategy(), rememberListDetailSceneStrategy(), then compatBottomSheetSceneStrategy then listDetailSceneStrategy to chain them together

[Ian Lake]

(with the caveat on the then bug on the most recent release: https://kotlinlang.slack.com/archives/C04TPPEQKEJ/p1759983151912669?thread_ts=1759981546.972439&cid=C04TPPEQKEJ)