Mastering Swipe to Dismiss with Jetpack Compose Material3
Written on
Chapter 1: Getting Started
Grab your coffee ☕ and let's dive into how to efficiently remove items from a lazy column using a simple swipe gesture.
Section 1.1: Adding Dependencies
Ensure you include the following dependency in your :app/build.gradle.kts file:
dependency {
implementation("androidx.compose.material3:material3:1.2.1")}
Section 1.2: Creating a List of Items
Let's start by defining a list of items.
@Composable
fun Screen() {
val list = remember {
mutableStateListOf("Food", "Book", "Laptop")}
// Additional code will follow...
}
Subsection 1.2.1: Implementing SwipeToDismissListItem
Now, we will set up the SwipeToDismissListItem, which takes three parameters: item, onRemove, and modifier. Initially, we need to create a CoroutineScope to manage the delay for the onRemove action correctly.
@Composable
fun SwipeToDismissListItem(
item: String,
onRemove: () -> Unit,
modifier: Modifier = Modifier
) {
// Initialize CoroutineScope
val coroutineScope = rememberCoroutineScope()
// Define the dismiss state
val dismissState = rememberSwipeToDismissBoxState(
confirmValueChange = { state ->
if (state == SwipeToDismissBoxValue.EndToStart) {
coroutineScope.launch {
delay(1.seconds)
onRemove()
}
true
} else {
false}
}
)
// Additional code will follow...
}
Section 1.3: Adding the SwipeToDismissBox
Next, we will incorporate the SwipeToDismissBox, which needs both background content and the main content. The background content appears only during the drag action.
SwipeToDismissBox(
state = dismissState,
backgroundContent = {
val color by animateColorAsState(
when (dismissState.targetValue) {
SwipeToDismissBoxValue.Settled -> Color.LightGray
SwipeToDismissBoxValue.StartToEnd -> Color.Green
SwipeToDismissBoxValue.EndToStart -> Color.Red
}, label = "Changing color"
)
Box(
Modifier
.fillMaxSize()
.background(color)
)
},
modifier = modifier
) {
// Main content will go here...}
Subsection 1.3.1: Defining ListItem Content
The main content within the SwipeToDismissBox includes a ListItem that features a horizontal divider at the base.
Card {
ListItem(
headlineContent = {
Text(item)}
)
HorizontalDivider()
}
Section 1.4: Integrating LazyColumn
Returning to the Screen composable, we will add the LazyColumn. It's crucial to pass the item key to ensure we can accurately identify which item has been removed from the list.
LazyColumn {
items(
items = list,
key = { it }
) { item ->
SwipeToDismissListItem(
item = item,
onRemove = { list.remove(item) },
modifier = Modifier.animateItemPlacement(tween(200)) // Smooth deletion
)
}
}
Chapter 2: Tutorials and Resources
To stay updated, follow me and subscribe to my newsletter. For more insightful content, make sure to follow me on X and subscribe to my YouTube channel! Thank you for reading! 😊☕️
Learn to implement swipe-to-delete functionality using Material3 in this tutorial.
Discover how to remove items by swiping in Jetpack Compose in this informative video.