Facing issue with ModalBottomSheet in Jetpack Compose.
M. Sarmad Qadeer
Posted on January 21, 2024
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")
}
}
}
}
💖 💪 🙅 🚩
M. Sarmad Qadeer
Posted on January 21, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.