Why I am getting error in listener when I try to implement it in swipeable block?

Question

So, I am trying to go to next screen on swipe gesture I have two screen composables , SpeechScreen1 and Speechscreen2, so on Swipe gesture in SpeechScreen1, I want to go to Screehscreen2, I want to do, when I swipe towards right side in the screen.So, I have created a swipeable block inside my First screen and I am trying to add lsitener to it but it's giving error like this.

Below is the code for my first screen composable

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.*
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.SwipeableDefaults
import androidx.compose.material.SwipeableState
import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.example.speechrecognition.Destinations

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SpeechScreen1() {
    val navController: NavController = rememberNavController()

    var textFieldValue by remember { mutableStateOf(TextFieldValue()) }

    val swipeableState = rememberSwipeableState(initialValue = 0)
    val threshold = 0.5f
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(21.dp)
            .swipeable(
                state = swipeableState,
                anchors = mapOf(
                    0f to 0,
                    1000f to 1
                ),
                thresholds = FractionalThreshold(threshold),
                listener = {
                    navController.navigate(Destinations.speechscreen2) //I want to navigate to another screen
                }
            )
        Text(
            text = "Please read the following text:",
            style = TextStyle(
                fontSize = 20.sp,
                lineHeight = 28.sp,
                fontFamily = FontFamily.Serif,
                fontWeight = FontWeight(400),
                color = Color(0xFF000000)
            )
        )
        Text(
            text = "One morning Dorothy crossed the hall of the palace
and knocked on the door of another girl named Trot. When told to
enter, Dorothy found that Trot had company, an old sailor-man with a
wooden leg who was sitting by the open window puffing smoke from a
pipe.",
            style = TextStyle(
                fontSize = 32.sp,
                lineHeight = 40.sp,
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight(300),
                color = Color(0xFF080808)
            ),
            modifier = Modifier
                .width(334.dp)
                .height(440.dp)
                .padding(top = 9.dp)
        )
        Row(modifier = Modifier.padding(top = 27.dp)) {
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFF686868))
                    .padding(top = 26.dp)
            ) {
            }
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {
            }
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {
            }
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {
            }
        }
        Column(Modifier.fillMaxSize()) {
            Row(Modifier.fillMaxWidth()) {
                Text(
                    text = "00.00",
                    style = TextStyle(
                        fontSize = 20.sp,
                        lineHeight = 28.sp,
                        fontFamily = FontFamily.SansSerif,
                        fontWeight = FontWeight(700),
                        color = Color(0xFF000000),
                    ),
                    modifier = Modifier.padding(26.dp, top = 34.dp)
                )
            }
        }
    }
}

So, where am I going wrong in approach to solve this issue?

Answer 1

The swipeable Modifier does not offer a parameter named "listener", as seen in the documentation:

@ExperimentalMaterialApi
fun <T : Any?> Modifier.swipeable(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    thresholds: (from, to) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
    velocityThreshold: Dp = VelocityThreshold
): Modifier

So you would need another approach to solve this. Look at the example provided at the documentation, it might give you some hints.

Please also note that Modifier.swipeable was deprecated in favor of Modifier.anchoredDraggable. See the migration guide on how to use the new Modifier.