How can I create a SwipeToDismiss gesture using Compose and Material 3?

Question

Question:

I'm working on an Android application using Jetpack Compose and Material 3, and I want to implement a swipe-to-dismiss gesture for a list of items. I've seen examples for older versions of Jetpack Compose and Material 2, but I'm not sure how to do this with the latest version of Compose and Material 3.

Here's what I need:

• A simple implementation of a swipe-to-dismiss gesture for list items.
• Handling the dismissal action to remove the item from the list.
• Any relevant Compose and Material 3 components or APIs that should be used.

I've already set up a basic list using LazyColumn and I understand the basics of handling gestures in Compose, but I'm unsure how to specifically implement the swipe-to-dismiss functionality with the latest APIs.

Additional Information:

• I'm using Jetpack Compose version 1.7.0-beta01 and Material 3 version 1.3.0-beta01.
• Here's a snippet of my current list setup:

@Composable
fun MyList(items: List<String>) {
    LazyColumn {
        items(items) { item ->
            ListItem(
                text = { Text(item) }
            )
        }
    }
}

Answer 1

This could be a basic implementation for Material3 with delete a left to right gesture.

@Composable
fun SwipeToDeleteScreen() {
    val mutableList = remember {mutableStateListOf("Ella", "Sam", "Molly", "Tom", "Greg")}

        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(all = 5.dp),
            verticalArrangement = Arrangement.spacedBy(2.dp)
        ) {
            items(mutableList) { element ->
                SwipeToDismissContainer(
                    item = element,
                    onDelete ={ mutableList.remove(element) }
                ) {
                    Row(modifier = Modifier.fillMaxSize().padding(8.dp)) {
                        Text(text = element)
                    }
                }
            }
        }
}

@Composable
fun SwipeToDismissContainer(
    item: String,
    onDelete: (String) -> Unit,
    content: @Composable (String) -> Unit
) {
    val dismissState = rememberSwipeToDismissBoxState(
        confirmValueChange = { newValue ->
            if(newValue == SwipeToDismissBoxValue.StartToEnd){
                onDelete(item)
                true
            } else {
                false
            }
        }
    )

    SwipeToDismissBox(
        state = dismissState,
        modifier = Modifier,
        backgroundContent = {
            if (dismissState.dismissDirection.name == SwipeToDismissBoxValue.StartToEnd.name) {
                Row(modifier = Modifier.fillMaxSize().background(Color.Red),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(Icons.Default.Delete, contentDescription = "delete")
                }
            }
        },
        enableDismissFromEndToStart = false,
        content = {content(item)}
    )
}