[SOLVED] Create a fully expanded ModalBottomSheet in Jetpack Compose Material 3 without padding above the drag handle

Create a fully expanded ModalBottomSheet in Jetpack Compose Material 3 without padding above the drag handle

I'm trying to implement a ModalBottomSheet using Jetpack Compose with Material 3, and I want it to be fully expanded to cover the entire screen. Additionally, I want to remove any padding that appears above the drag handle.

Note: It is fully expanded bottom sheet.

 val state= rememberModalBottomSheetState(skipPartiallyExpanded = true)
    
 ModalBottomSheet(
        contentColor = MaterialTheme.colorScheme.onSurface,
        modifier = Modifier
            .fillMaxSize() // Ensure the sheet fills the entire screen
             .safeDrawingPadding() // safepadding draw in the constraints statusbar/navigaitonbar
             .padding(contentPadding), // Apply padding for showing below top bar
        onDismissRequest = {
        
        },
        sheetState = state,
    ) {
        // Bottom sheet content
    }

i tried dragHandle = null // Remove the drag handle it is not working. It is just removing draghandle not padding area.

Also the padding area not shown up when i set skipPartiallyExpanded = false. But the same thing i need in expanded state fully.

Solution

It seems that the issue you encountered with the ModalBottomSheet was related to a bug in Material3 version 1.4.0-alpha02, which has since been fixed in Material3 version 1.4.0-alpha03. This kind of issue, where certain UI components behave incorrectly or inconsistently, is unfortunately common during the alpha or early release stages of libraries, as new features are being tested and refined.