How to implement Compose Navigation Arguments

Question

I'm practicing Jetpack compose navigation, currently I'm stuck at passing arguments, so the correct information can be displayed when clicked.

I'm trying to navigate from this Destination, MenuScreen;

@Composable
fun HomeScreen(onHomeCardClick: () -> Unit) {
    HomeContentScreen(onHomeCardClick = onHomeCardClick)
}

@Composable
fun HomeContentScreen(
    modifier: Modifier = Modifier,
    onHomeCardClick: () -> Unit
) {
    Column(
        modifier
            .verticalScroll(rememberScrollState())
            .padding(vertical = 16.dp)) {
        HomeQuote()
       
   ....
    }
}

To this destination, MenuInfoScreen;

@Composable
fun HomeInfoScreen(){
    WelcomeText()
    HomeInfoDetails()
}

@Composable
fun WelcomeText() {
    Text(
        text = "Welcome, to Home Information",
        style = MaterialTheme.typography.h3,
        modifier = Modifier.padding(horizontal = 12.dp, vertical = 18.dp)
    )
}

@Composable
fun HomeInfoDetails(
    homeInfo: HomeInfo
) {
    Card(
        modifier = Modifier
            .padding(10.dp)
            .clip(CircleShape),
        elevation = 10.dp,
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
        ) {
            Image(
                painter = painterResource(id = homeInfo.homeInfoImageId),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(shape = RoundedCornerShape(topEnd = 4.dp, bottomEnd = 4.dp)),
                contentScale = ContentScale.Fit
            )
            Spacer(modifier = Modifier.height(16.dp))
            Text(
                text = homeInfo.title,
                style = MaterialTheme.typography.h3
            )
            Spacer(modifier = Modifier.height(16.dp))
            Text(
                text = homeInfo.description,
                style = MaterialTheme.typography.h5
            )
        }
    }
}

Here's the model I'm trying to follow, HomeInfoModel;

object HomeInfoModel {
        

    val homeInfoModelList = listOf(
        
        HomeInfo(
            id = 1,
            title = "Monty",
            sex = "Male",
            age = 14,
            description = "Monty enjoys chicken treats and cuddling while watching Seinfeld.",
            homeInfoImageId = R.drawable.ab1_inversions
        ),
       .....
    )
}

Here's the my NavHost;

NavHost(
        navController = navController,
        startDestination = Home.route,
        modifier = modifier
    ) {
        // builder parameter will be defined here as the graph

        composable(route = Home.route) {
            HomeScreen(
                onHomeCardClick = {}
            )
        }
        ....
        composable(route = HomeInfoDestination.route) {
            HomeInfoScreen()
        }
    }
}

And my Destinations file;

object Home : KetoDestination {
    override val route = "home"
}

....
object HomeInfoDestination : KetoDestination{
    override val route = "homeInfo"

}

I know this is a lot and I'm a bit off, but please I've been stuck here for more than a week now. Any little information willl surely come handy. And Of Course very much appreciated.

Thanks for your help in advance.

Answer 1

You should extract the arguments from the NavBackStackEntry that is available in the lambda of the composable() function.

You can read more in the official android docs https://developer.android.com/jetpack/compose/navigation#nav-with-args