How would you implement multiple `ModalBottomSheet...

# compose

[Lorenzo Benevento]

How would you implement multiple `ModalBottomSheet`s? I found this article which explains how to do it using a BottomSheetScaffold but as soon as you try to do the same thing with a ModalBottomSheetLayout it throws java.lang.IllegalArgumentException: The initial value must have an associated anchor. because you are initializing it with a null value. If you just swap the two or more contents instead of setting a null value when you close the ModalBottomSheet it will work but it won't animate correctly.

[jossiwolf]

The simple fix is this:

@Composable fun App() {
   var sheetContent: (@Composable ColumnScope.() -> Unit)? by remember { mutableStateOf(null) }
   ModalBottomSheetLayout(sheetContent =   sheetContent ?: { EmptySheet() }, ...)
}

@Composable fun EmptySheet() {
   Box(Modifier.height(1.dp)
}

See https://issuetracker.google.com/issues/178529942
I'd advise using Accompanist Navigation Material instead though as it takes care of these things.

[Lorenzo Benevento]

Thank you very much, I'll definitely take a look at that library. 😁

[Lorenzo Benevento]

@jossiwolf Do you by any chance know how to handle the scrim on top of the status bar? I had to create a color animation that when running in sync with the ModalBottomSheet had the desired effect but I feel that's not the right way to do it.