SwipeToDismissBox

Functions summary

Unit
@Composable
SwipeToDismissBox(
    state: SwipeToDismissBoxState,
    backgroundContent: @Composable RowScope.() -> Unit,
    modifier: Modifier,
    enableDismissFromStartToEnd: Boolean,
    enableDismissFromEndToStart: Boolean,
    gesturesEnabled: Boolean,
    onDismiss: (SwipeToDismissBoxValue) -> Unit,
    content: @Composable RowScope.() -> Unit
)

A composable that can be dismissed by swiping left or right.
Cmn

Functions

SwipeToDismissBox

Cmn 
@Composable
fun SwipeToDismissBox(
    state: SwipeToDismissBoxState,
    backgroundContent: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    enableDismissFromStartToEnd: Boolean = true,
    enableDismissFromEndToStart: Boolean = true,
    gesturesEnabled: Boolean = true,
    onDismiss: (SwipeToDismissBoxValue) -> Unit = {},
    content: @Composable RowScope.() -> Unit
): Unit

A composable that can be dismissed by swiping left or right.

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.ListItem
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.SwipeToDismissBox
import androidx.compose.material3.SwipeToDismissBoxValue
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSwipeToDismissBoxState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape

val dismissState = rememberSwipeToDismissBoxState()
var isVisible by remember { mutableStateOf(true) }
val scope = rememberCoroutineScope()
if (isVisible) {
    SwipeToDismissBox(
        state = dismissState,
        backgroundContent = {
            val color by
                animateColorAsState(
                    when (dismissState.targetValue) {
                        SwipeToDismissBoxValue.Settled -> Color.LightGray
                        SwipeToDismissBoxValue.StartToEnd -> Color.Green
                        SwipeToDismissBoxValue.EndToStart -> Color.Red
                    }
                )
            Box(Modifier.fillMaxSize().background(color))
        },
        onDismiss = { direction ->
            if (direction == SwipeToDismissBoxValue.EndToStart) {
                isVisible = false
            } else {
                scope.launch { dismissState.reset() }
            }
        },
    ) {
        OutlinedCard(shape = RectangleShape) {
            ListItem(
                headlineContent = { Text("Cupcake") },
                supportingContent = { Text("Swipe me left or right!") },
            )
        }
    }
}
Parameters
state: SwipeToDismissBoxState

The state of this component.
backgroundContent: @Composable RowScope.() -> Unit

A composable that is stacked behind the content and is exposed when the content is swiped. You can/should use the state to have different backgrounds on each side.
modifier: Modifier = Modifier

Optional Modifier for this component.
enableDismissFromStartToEnd: Boolean = true

Whether SwipeToDismissBox can be dismissed from start to end.
enableDismissFromEndToStart: Boolean = true

Whether SwipeToDismissBox can be dismissed from end to start.
gesturesEnabled: Boolean = true

Whether swipe-to-dismiss can be interacted by gestures.
onDismiss: (SwipeToDismissBoxValue) -> Unit = {}

Optional callback to be called when content is dismissed. onDismissed provides the current dismissed direction.
content: @Composable RowScope.() -> Unit

The content that can be dismissed.