Design-wise, you should never show multiple bottom...
# compose
a
Design-wise, you should never show multiple bottom sheets at the same time.
m
Purely from a state management perspective, not thinking about specifics of the bottom sheet composable or anything like that, it sounds like the way to go would be to use a sealed type to represent all the distinct types of sheets you want to display. Depending on how different the sheet UI is, you may still need 10 distinct Composable fn’s to actually display them, or maybe you can get away with defining a UI model that holds all the sheet properties and populate your composable with that.
q
@Mitch Ware and @Albert Chang Only one bottom sheet is visible at a time, but let's consider a scenario where we have a user information form or any other use case that requires multiple different types of bottom sheets on the same screen. Approach 1: Define a single composable function and use a
sealed class
with a
when
condition to display the appropriate content based on the type of the sheet:
@Composable
fun SingleBottomSheetWithMultipleContents(sealedClassType: SheetType) {
ModelBottomSheet( // here we need to have only one Model Sheet
when (sealedClassType) {
SheetType.Type1 -> { /* Content for sheet type 1 */ }
SheetType.Type2 -> { /* Content for sheet type 2 */ }
SheetType.Type3 -> { /* Content for sheet type 3 */ }
// Continue for other sheet types
}
)
}
Approach 2: Use a separate composable function for each type of bottom sheet, as suggested in the documentation: For this Approach Each composable function contains
ModalBottomSheet
@Composablefun SheetType1() { ModalBottomSheet { // Content specific to this sheet type } }
@Composablefun SheetType2() { ModalBottomSheet { // Content specific to this sheet type } }
@Composablefun SheetType1() { ModalBottomSheet { // Content specific to this sheet type } } and soo on
What the suggested method would be preferred to handle such case. Actually i am looking for a recommended solution by google.