androidandroid-jetpack-composematerial-designbottom-sheet

Change BottomSheetScaffold Max Width


BottomSheetScaffold has a max width of 640dp according to the Material specs: https://m3.material.io/components/bottom-sheets/specs

But I need to implement it full-width, independently on the size of the screen. Is there a way to do that? The design team didn't get convinced to go with the Material guidelines... so weird that there is no way to change this limit, what's my alternative? Implement the whole component from scratch? 😅


Solution

  • Have a look at the documentation of BottomSheetScaffold:

    @Composable
    @ExperimentalMaterial3Api
    fun BottomSheetScaffold(
        sheetContent: @Composable ColumnScope.() -> Unit,
        modifier: Modifier = Modifier,
        scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
        sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight,
        sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth,
        // ...
        content: @Composable (PaddingValues) -> Unit
    ): Unit
    

    Note the sheetMaxWidth parameter you can pass. If you don't pass a value there, it will take the default BottomSheetDefaults.SheetMaxWidth value, which is 640.dp. You can simply pass the value of the screen width there:

    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp
    
    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetPeekHeight = 128.dp,
        sheetMaxWidth = screenWidth,
        sheetContent = {
            //...
        }
    ) { innerPadding ->
        // ...
    }