SwipeToDismissBox

Composable Component

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

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

Parameters

stateThe state of this component.
backgroundContentA 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.
modifierOptional Modifier for this component.
enableDismissFromStartToEndWhether SwipeToDismissBox can be dismissed from start to end.
enableDismissFromEndToStartWhether SwipeToDismissBox can be dismissed from end to start.
gesturesEnabledWhether swipe-to-dismiss can be interacted by gestures.
onDismissOptional callback to be called when content is dismissed. onDismissed provides the current dismissed direction.
contentThe content that can be dismissed.
Common

Deprecated Maintained for binary compatibility. Use updated signature with onDismissed parameter.

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

Code Examples

SwipeToDismissListItems

@Preview
@Composable
fun SwipeToDismissListItems() {
    val dismissState = rememberSwipeToDismissBoxState()
    var isVisible by remember { mutableStateOf(true) }
    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 {
                    dismissState.reset()
                }
            },
        ) {
            OutlinedCard(shape = RectangleShape) {
                ListItem(
                    headlineContent = { Text("Cupcake") },
                    supportingContent = { Text("Swipe me left or right!") },
                )
            }
        }
    }
}