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

Top comments (0)