Drag a ModalBottomSheet to full screen in jetpack compose

Question

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)
                )
            }
        }
    }
}

Answer 1

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.

Answer 2

If you want to drag from bottom to top you can use this.

val scaffoldState = rememberBottomSheetScaffoldState()

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {
        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)
            )
        }
    }
) { paddingValues ->
}

Otherwise, you need to bind this sheetState's hide() and show() functions to something like a button.

val sheetState = rememberModalBottomSheetState()
val coroutineScope = rememberCoroutineScope()

coroutineScope.launch { 
    //sheetState.show()
    //sheetState.hide()
}