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


state	The state of this component.
backgroundContent	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	Optional `Modifier` for this component.
enableDismissFromStartToEnd	Whether SwipeToDismissBox can be dismissed from start to end.
enableDismissFromEndToStart	Whether SwipeToDismissBox can be dismissed from end to start.
gesturesEnabled	Whether swipe-to-dismiss can be interacted by gestures.
onDismiss	Optional callback to be called when `content` is dismissed. onDismissed provides the current dismissed direction.
content	The 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!") },
                )
            }
        }
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled