Passing Data with argument using Navigation in Jetpack Compose

Question

I'm new in Android Development and Currently studying about Sending arguments between screen, can you guys help me how to do it with Jetpack Compose especially using Navigation? this is my source code

@Composable
fun LoginScreen(navController: NavController) {
    var Username by remember { mutableStateOf("") }
    val maxChar = 5
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Blue),
        contentAlignment = Alignment.Center
    )
    {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "Login",
                color = Color.White,
                fontSize = 50.sp,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center
            )

            TextField(
                value = Username,
                onValueChange = {
                    if (it.length <= maxChar) Username = it
                },
                modifier = Modifier
                    .padding(vertical = 4.dp),
                shape = RoundedCornerShape(8.dp)
            )

            Button(onClick = { navController.navigate(HOME_ROUTE) }) {
                Text(
                    text = "Login")
            }

            Button(onClick ={ navController.navigate(Screen.SignUp.route)})    {
                Text(text = "Register")
            }
        }
    }
}

fun NavGraphBuilder.homeNavGraph(navController: NavHostController){
    navigation(startDestination = Screen.Home.route,
        route = HOME_ROUTE){
        composable(route = Screen.Home.route){
            HomeScreen(navController = navController)
        }
        composable(route = Screen.Detail.route){
            DetailScreen(navController = navController)
        }
    }
}

fun NavGraphBuilder.authNavGraph(navController: NavHostController){
    navigation(startDestination = Screen.Login.route,
        route = AUTHENTICATION_ROUTE){
        composable(route = "Login_Screen/{Username}",
            arguments = listOf(
                navArgument("Username"){
                    type = NavType.StringType
                }
            )
        ){
            val ID = it.arguments?.getString("Username")
            LoginScreen(navController = navController)
        }
        composable(route = Screen.SignUp.route){
            SignUpScreen(navController = navController)
        }
    }
}

I want to pass the Username from the Login Screen into the HomeScreen using the navigation arguments but I dont know how to do it. I'm confuse with the documentation on the Android Website, can you guys help me?

Answer 1

First of all I would recommend to create a separate class with constants and your Routes:

object Navigation {
    object Args {

        const val USER_NAME = "UserName"
    }

    sealed class Route(val route: String) {
        object Home : Route("Home")
        object Login : Route("Login/{$USER_NAME}") {

            fun createRoute(userName: String) = "$route/$userName"
        }

        object Settings : Route("Settings")
    }
}

Then invoke it from the place you needed:

navController.navigate(Navigation.Route.Login.createRoute(userName))