DEV Community

M. Sarmad Qadeer
M. Sarmad Qadeer

Posted on

Facing issue with ModalBottomSheet in Jetpack Compose.

I am using ModalBottomSheet but I am facing two issues:

1) There is a white line on the right corner of the scrim.
2) The scrim color is not animating while opening and closing of ModalBottomSheet.

Image descriptionImage description

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Button(onClick = {
    showBottomSheet = true
}) {
    Icon(Icons.Filled.Add, contentDescription = "")
    Text("Show bottom sheet")
}

if (showBottomSheet) {
    ModalBottomSheet(
        onDismissRequest = { showBottomSheet = false },
        sheetState = sheetState,
        dragHandle = { Text(text = "") },
        scrimColor = Color.Black.copy(alpha = 0.63f),
        containerColor = Color.White,
        modifier = Modifier.height(280.dp),
        windowInsets = WindowInsets(0,0,0,0)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxSize().padding(16.dp)
        ) {
            Text(text = "This is a bottom sheet")
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up