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

enter image description here

enter image description here

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

There are 0 best solutions below