How to Implement Swipe-to-Delete with Edit Button in Jetpack Compose?

Question

I have a Row and the content inside it. What I want to do here is, when I slide the Row to the left, the delete and edit button will appear. I could not apply this to my code. I looked at some third libraries and applied them, but I could not adapt it exactly the way I wanted. Can you help me with this? here is my codes and what I want to do

left shifted version

normal

my code:

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MealItem(
    index: Int,
    image: String?,
    ntrName: String?,
    kcal: String?,
    unit: String?,
    imgSize: Dp = 50.dp,
    nameMaxLines: Int = 1,
    nameFontSize: TextUnit = 15.sp,
    nameFontWeight: FontWeight = FontWeight.Normal,
    onClick: () -> Unit,
    startPadding: Dp = 0.dp,
    endPadding: Dp = 0.dp,
) {

    val swipeableState = rememberSwipeableState(0)
    val sizePx = with(LocalDensity.current) { 100.dp.toPx() }
    val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states

    Box(modifier = Modifier.fillMaxWidth()) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = startPadding, end = endPadding, bottom = 15.dp)
                .swipeable(  state = swipeableState,
                    anchors = anchors,
                    thresholds = { _, _ -> FractionalThreshold(0.3f) },
                    orientation = Orientation.Horizontal)
                .clickable {
                    onClick()
                },
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {

            Row() {
                image?.let { img ->
                    AsyncImage(
                        modifier = Modifier
                            .size(imgSize)
                            .clip(RoundedCornerShape(5.dp)),
                        model = img,
                        contentDescription = null
                    )
                }
                Spacer(modifier = Modifier.padding(end = 10.dp))
                Column() {
                    Text(
                        text = ntrName ?: "",
                        fontSize = nameFontSize,
                        fontWeight = nameFontWeight,
                        overflow = TextOverflow.Ellipsis, // Add this line to handle long text
                        maxLines = nameMaxLines
                    )
                    Row() {
                        unit?.let {
                            Text(
                                text = "1 $unit",
                                color = MaterialTheme.colors.grayColor
                            )
                        }
                        Spacer(modifier = Modifier.padding(end = 5.dp))
                        kcal?.let {
                            Text(
                                text = "$it kcal",
                                color = MaterialTheme.colors.grayColor
                            )
                        }
                    }
                }
            }
            CheckedBox()
        }
    }
}


@Composable
fun CheckedBox() {


    val isCheck = remember { mutableStateOf(false) }
    val color = if (isSystemInDarkTheme()) Color(0xff24262D) else Color.White

    val borderColor = Color(0XFFA0A1A4)
    val border = if (isCheck.value) BorderStroke(0.dp, color = borderColor) else BorderStroke(
        2.dp,
        color = borderColor
    )


    Card(
        elevation = 0.dp,
        shape = RoundedCornerShape(6.dp),
        border = border
    ) {
        Box(
            modifier = Modifier
                .size(25.dp)
                .background(if (isCheck.value) DYTGreenColor else color)
                .clickable {
                    isCheck.value = !isCheck.value
                },
            contentAlignment = Alignment.TopStart
        ) {
            if (isCheck.value)
                Icon(Icons.Default.Check, contentDescription = "", tint = Color.White)
        }

    }
}