How do I set the height of the modal? On a larger screen the modal appears whole, on a smaller screen it takes up about 80% of the screen. I tried LocalConfiguration.current.screenWidthDp but it didn't quite work out the way I wanted it to - on a larger screen it is fine, but on a smaller screen the modal ends up in the status bar. Could someone help please?
@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun TripListModalWithDetails(
state: TripListViewState,
uiIntent: (TripListUiIntent) -> Unit
) {
val sheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = true
)
if (state.detailsId != null) {
ModalBottomSheet(
onDismissRequest = { uiIntent(TripListUiIntent.HideTripDetails) },
sheetState = sheetState,
tonalElevation = TONAL_ELEVATION,
dragHandle = {}
) {
Column(
modifier = Modifier
.background(MaterialTheme.colorScheme.background)
.padding(vertical = MaterialTheme.whereNowSpacing.space24)
.padding(horizontal = MaterialTheme.whereNowSpacing.space16)
.verticalScroll(rememberScrollState())
) {
Text(
modifier = Modifier.align(Alignment.CenterHorizontally),
text = stringResource(R.string.trip_modal_departure),
style = MaterialTheme.typography.titleLarge.copy(MaterialTheme.colorScheme.primary)
)
HorizontalDivider(
modifier = Modifier.padding(
vertical = MaterialTheme.whereNowSpacing.space16,
horizontal = MaterialTheme.whereNowSpacing.space8
)
)
You can achieve this by using the heightIn modifier together with LocalConfiguration.current.screenHeightDp.dp * (portion of the screen you want it to take)
val sheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = true)
ModalBottomSheet(
onDismissRequest = { uiIntent(TripListUiIntent.HideTripDetails)},
modifier = Modifier.fillMaxWidth()
.heightIn(max = LocalConfiguration.current.screenHeightDp.dp * 0.7f),
sheetState = sheetState,
tonalElevation = TONAL_ELEVATION,
dragHandle = {}
) { ... }
Based on doc heightIn modifier - "Constrain the height of the content to be between min(dp) and max(dp) as permitted by the incoming measurement Constraints. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size."