Drag a ModalBottomSheet to full screen in jetpack compose

Issue

we use a material3 ModalBottomSheet to display information. In a next step, the user should be able to maximize the ModalBottomSheet to full screen by dragging up the drag handle and the content of the ModalBottomSheet should show more information than before.

In the current state of implementation I can hide the ModalBottomSheet by dragging it down or clicking outside the bottom sheet. But I can not drag it up to neither increase the size nor to maximize the bottom sheet.

Any ideas are welcome. Here is our composable at its current state.

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun Content(
    onDismissClicked: () -> Unit
) {
    val sheetState = rememberModalBottomSheetState()
    Scaffold(
        containerColor = Color.Transparent,
        modifier = Modifier.testTag(SCAFFOLD)
    ) { _ ->
        ModalBottomSheet(
            onDismissRequest = {
                onDismissClicked()
            },
            sheetState = sheetState,
            modifier = Modifier
                .testTag(BOTTOM_SHEET)
                .fillMaxSize()
        ) {
            Row(
                modifier = Modifier.height(128.dp),
                horizontalArrangement = Arrangement.spacedBy(10.dp),
                verticalAlignment = Alignment.Top
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_point),
                    contentDescription = null,
                    modifier = Modifier
                        .size(38.dp)
                        .padding(start = 10.dp)
                        .testTag(POINT_ICON)
                )
                Text(
                    text = "Test",
                    fontSize = 28.sp,
                    modifier = Modifier.testTag(POINT_TITLE)
                )
            }
        }
    }
}

Solution

Thanks Faruk, we found out that FlexibleBottomSheet provides the required flexibility in terms of resizing dynamically and changing the content of the sheet depending on its state.

Answered By - padmalcom