Facing issue with ModalBottomSheet in Jetpack Compose.

M. Sarmad Qadeer — Sun, 21 Jan 2024 20:38:50 +0000

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.

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

DEV Community: M. Sarmad Qadeer

Facing issue with ModalBottomSheet in Jetpack Compose.