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? 😅
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 ->
// ...
}