I am using SwipeToDismiss in Jetpack Compose to delete items from a list. The problem is whenever you swipe an item that has something under it, it deletes the swiped item, but the swiped screen doesn't disappear.
This image shows the problem.

It is overlaying the item below it.
Here is my code for SwipeToDismiss
val dismissState = rememberDismissState(
confirmStateChange = {
if (it == DismissValue.DismissedToStart) {
storedItemsViewModel.deleteOne(sentence)
}
true
}
)
val direction = dismissState.dismissDirection
SwipeToDismiss(
state = dismissState,
/*** create dismiss alert Background */
directions = setOf(
DismissDirection.EndToStart
),
dismissThresholds = { /*direction ->*/
FractionalThreshold(if (direction == DismissDirection.EndToStart) 0.1f else 0.5f)
FractionalThreshold(0.2f)
},
background = {
val color = when (dismissState.dismissDirection) {
DismissDirection.StartToEnd -> Color.Green
DismissDirection.EndToStart -> Color.Red
null -> Color.Transparent
}
val alignment = Alignment.CenterEnd
val icon = Icons.Default.Delete
val scale by animateFloatAsState(
//this scales the icon
if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f
)
Box(
Modifier
.fillMaxSize()
.background(color)
.padding(horizontal = Dp(20f)),
contentAlignment = alignment
) {
Icon(
icon,
contentDescription = "Delete Icon",
modifier = Modifier.scale(scale)
)
}
},
/**** Dismiss Content */
dismissContent = {
Card(elevation = animateDpAsState( if (dismissState.dismissDirection != null) 4.dp else 0.dp).value) {
FavoriteItem(sentence, word, grammar)
}
},
)