Swipe to dismiss in Lazy Column

Swipetodismiss.kt

@ExperimentalMaterialApi
@Composable
fun Tutorial2_13Screen() {
    val viewModel = MyViewModel()
    TutorialContent(viewModel)
}

@ExperimentalMaterialApi
@Composable
private fun TutorialContent(viewModel: MyViewModel) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Button(onClick = {
            viewModel.newList()
        }) {
            Text(text = "Generate User List")
        }

        val usersList = viewModel.listFlow.collectAsState()
        // This is an example of a list of dismissible items, similar to what you would see in an
// email app. Swiping left reveals a 'delete' icon and swiping right reveals a 'done' icon.
// The background will start as grey, but once the dismiss threshold is reached, the colour
// will animate to red if you're swiping left or green if you're swiping right. When you let
// go, the item will animate out of the way if you're swiping left (like deleting an email) or
// back to its default position if you're swiping right (like marking an email as read/unread).
        LazyColumn {

            items(items = usersList.value, key = { user -> user.id }) { user ->

                val currentItem by rememberUpdatedState(user)

                val dismissState = rememberDismissState(
                    confirmStateChange = { dismissValue  ->
                        when (dismissValue) {
                            DismissValue.DismissedToEnd -> {
                                viewModel.removeItem(currentItem)
                                true
                            }
                            DismissValue.DismissedToStart -> {
                                viewModel.removeItem(currentItem)
                                true
                            }
                            else -> { false }
                        }
                    }
                )
                SwipeToDismiss(
                    state = dismissState,
                    modifier = Modifier.padding(vertical = 4.dp),
                    directions = setOf(StartToEnd, EndToStart),
                    dismissThresholds = { direction ->
                        FractionalThreshold(if (direction == StartToEnd) 0.25f else 0.5f)
                    },
                    background = {

                        val direction = dismissState.dismissDirection ?: return@SwipeToDismiss

                        val color by animateColorAsState(

                            when (dismissState.targetValue) {
                                Default -> Color.LightGray
                                DismissedToEnd -> Color.Green
                                DismissedToStart -> Color.Red
                            }
                        )
                        val alignment = when (direction) {
                            StartToEnd -> Alignment.CenterStart
                            EndToStart -> Alignment.CenterEnd
                        }
                        val icon = when (direction) {
                            StartToEnd -> Icons.Default.Done
                            EndToStart -> Icons.Default.Delete
                        }
                        val scale by animateFloatAsState(
                            if (dismissState.targetValue == Default) 0.75f else 1f
                        )

                        Box(
                            Modifier
                                .fillMaxSize()
                                .background(color)
                                .padding(horizontal = 20.dp),
                            contentAlignment = alignment
                        ) {
                            Icon(
                                icon,
                                contentDescription = "Localized description",
                                modifier = Modifier.scale(scale)
                            )
                        }
                    },
                    dismissContent = {
                        Card(
                            elevation = animateDpAsState(
                                if (dismissState.dismissDirection != null) 4.dp else 0.dp
                            ).value
                        ) {
                            ListItem(
                                text = {
                                    Text(user.name, fontWeight = FontWeight.Bold)
                                },
                                secondaryText = { Text("Swipe me left or right!") }
                            )
                        }
                    }
                )
            }
        }
    }
}


class MyViewModel : ViewModel() {
    private var userList = mutableStateListOf<User>()
    val listFlow = MutableStateFlow(userList)

    fun newList() {
        val mutableList = mutableStateListOf<User>()
        for (i in 0..10) {
            mutableList.add(User(i, "User$i"))
        }

        userList = mutableList
        listFlow.value = mutableList
    }

    fun removeItem(item: User) {
        val index = userList.indexOf(item)
        userList.remove(userList[index])
    }

}

data class User(val id: Int, val name: String)

Sure, would you mind opening a PR for this? I had taken this example from official docs in 2021

Sure. Happy to do that. I will create a pr

…

On Sun, May 14, 2023, 4:43 PM Smart Tool Factory ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Sure, would you mind opening a PR for this? I had taken this example from official docs in 2021 — Reply to this email directly, view it on GitHub <https://gist.github.com/raghunandankavi2010/0f6ff1e77511bb14d6ec156d994289a9#gistcomment-4567531> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABAFPKJYNSTJXJCGBT34MXLXGC47HBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMRUGIZDGNZSU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you authored the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .