SwipeToDismissBox

Component in Material 3 Compose

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

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha02")
}

Overloads

@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,
)

Parameters

name	description
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.
content	The content that can be dismissed.

Code Example

SwipeToDismissListItems

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