Navigating to a new page in Kotlin Compose

Question

I need help figuring out how when I click on the card it takes me to a whole new page that says "Success". Right now when I click it says "Success" but right above the card.

@OptIn(ExperimentalFoundationApi::class)

@Composable fun AlbumList(title: String, url: String){

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "MainScreen") {
    composable("MainScreen") {MainActivity() }
    composable("album") { testSwitch(title, url) }

}

    Card(
    shape = RoundedCornerShape(5.dp),
    elevation = 16.dp,
    modifier = Modifier
        .combinedClickable(

            onClick = {

                navController.navigate("album"){
                    popUpTo("album") { inclusive = true }
                }
            }

                    )
        .padding(start = 16.dp, end = 16.dp, top = 5.dp, bottom = 5.dp),
) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {


            Column(Modifier.padding(8.dp)) {
                Text(
                    text = title,
                    style = MaterialTheme.typography.h4,
                    color = MaterialTheme.colors.onSurface,
                )
                Text(
                    text = url,
                    style = MaterialTheme.typography.body2,
                )
            }
        }

}

}

@OptIn(ExperimentalMaterialApi::class)

@Composable fun testSwitch(title: String, url: String) {

Text("Success")
}

enter image description here

Answer 1

As defined in the documentation:

Define your NavHost and the respective routes...

NavHost(navController = navController, startDestination = "profile") {
    composable("profile") { ProfileScreen(navController) }
    composable("friendslist") { FriendsListScreen(navController) }
}

If you need to call the FriendsListScreen from ProfileScreen:

@Composable
fun ProfileScreen(navController: NavController) {
    /*...*/
    Button(onClick = { navController.navigate("friendslist") }) {
        Text(text = "Navigate next")
    }
    /*...*/
}