How add Bottom Modal Sheet within a Dialog Composable?

Question

Opened by clicking a FAB, I have an Add Item Dialog which includes an option to assign an image to the shopping list item. Is it possible to implement a Bottom Modal Sheet with options for camera capture, etc. at the bottom of the Dialog?

Answer 1

You can use a ModalBottomSheetLayout inside you're dialog, put you're bottom sheet composable inside the sheetContent part of this layout, and the rest of you're dialog in the content part of this layout, and then manipulate the open and closed state of the bottom sheet dialog with the sheetState

It will give you something like that :

// Create the sheet state
val mySheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

// Add the layout
ModalBottomSheetLayout(
    sheetContent = {
        // You're camera caption button here, or anything else 
    },
    sheetState = mySheetState
) {
    // You're dialog content here
}

// Show or hide you're bottom sheet dialog
LaunchedEffect(Unit) { mySheetState.hide() }
LaunchedEffect(Unit) { mySheetState.show() }