What are Navigation Arguments?

Navigation arguments are like passing notes between screens. When you need to share information from one screen to another, you use arguments to carry that data along with the navigation. For example, when a user clicks on a product in a list, you need to pass the product ID to the detail screen to show the correct information.

Types of Arguments

Basic Argument Passing

@Composable
fun NavigationWithArgs() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        // Home screen route - starting point of the navigation
        composable("home") {
            HomeScreen(
                onNavigateToProfile = { data ->
                    // Navigate to profile screen with a userId parameter
                    // The route will be constructed as "enteredText/$data"
                    navController.navigate("enteredText/$data")
                }
            )
        }

        // Profile screen route with argument
        // The {data} in the route is a placeholder for the actual user ID
        composable(
            route = "enteredText/{data}",
            // Define the argument type as String
            arguments = listOf(
                navArgument("data") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            // Extract the data argument from the navigation back stack entry
            val data = backStackEntry.arguments?.getString("data")
            ProfileScreen(
                data = data,
                onNavigateBack = {
                    navController.popBackStack()
                }
            )
        }
    }
}

/**
 * HomeScreen displays the main screen of the application.
 * It contains a button that navigates to a specific user's profile.
 *
 * @param onNavigateToProfile Callback function that takes a userId parameter
 *                          and handles navigation to the profile screen
 */
@Composable
fun HomeScreen(onNavigateToProfile: (String) -> Unit) {
    var text by remember { mutableStateOf("") }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 50.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = {text = it},
            label = { Text("Enter text")}
        )
        // Button that triggers navigation with a hardcoded user ID
        // In a real app, this would typically come from a user selection or authentication
        Button(onClick = { onNavigateToProfile(text) }) {
            Text("Send text to profile screen")
        }
    }
}

/**
 * ProfileScreen displays the profile information for a specific user.
 * It shows the content the user passed through navigation and provides a way to go back.
 *
 * @param data The data the user entered.
 * @param onNavigateBack Callback function to handle navigation back to the home screen
 */
@Composable
fun ProfileScreen(
    data: String?,
    onNavigateBack: () -> Unit
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 50.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        // Display the user ID passed through navigation
        Text("Entered Text: $data")
        Button(onClick = onNavigateBack) {
            Text("Go Back")
        }
    }
}

Understanding the Example Step by Step:

composable(
            route = "enteredText/{data}",//this is just a string we made up
            // Define the argument type as String
            arguments = listOf(
                navArgument("data") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            // Extract the data argument from the navigation back stack entry
            val data = backStackEntry.arguments?.getString("data")
            ProfileScreen(
                data = data,
                onNavigateBack = {
                    navController.popBackStack()
                }
            )
        }

Key Points:

• Arguments are defined in the route string with {argumentName}
• Each argument needs a type definition
• Arguments are accessed from backStackEntry
• Always handle nullable arguments safely

How this example renders

Above is just a snippet of the code to view the full code, you need to go to my GitHub page and look at the chapter9 passingArgs.kt file.

Multiple Arguments

@Composable
    fun NavigationWithMultipleArgs() {
        val navController = rememberNavController()
        
        NavHost(
            navController = navController,
            startDestination = "home"
        ) {
            composable("home") {
                HomeScreen(
                    onNavigateToProduct = { id, name -> 
                        navController.navigate("product/$id/$name") 
                    }
                )
            }
            composable(
                "product/{id}/{name}",
                arguments = listOf(
                    navArgument("id") { type = NavType.IntType },
                    navArgument("name") { type = NavType.StringType }
                )
            ) { backStackEntry ->
                val id = backStackEntry.arguments?.getInt("id")
                val name = backStackEntry.arguments?.getString("name")
                ProductScreen(
                    id = id,
                    name = name,
                    onNavigateBack = {
                        navController.popBackStack()
                    }
                )
            }
        }
    }
   
    @Composable
    fun HomeScreen(onNavigateToProduct: (Int, String) -> Unit) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
                .padding(top = 50.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Text(
                text = "Available Products",
                modifier = Modifier.padding(bottom = 16.dp)
            )
            
            // Sample product list - in a real app, this would come from a data source
            val products = listOf(
                Product(1, "Smartphone"),
                Product(2, "Laptop"),
                Product(3, "Headphones"),
                Product(4, "Tablet")
            )
            
            // Display each product as a button
            products.forEach { product ->
                Button(
                    onClick = { onNavigateToProduct(product.id, product.name) },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("View ${product.name}")
                }
            }
        }
    }
    
   
    @Composable
    fun ProductScreen(
        id: Int?,
        name: String?,
        onNavigateBack: () -> Unit
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
                .padding(top = 50.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            // Display product details
            Text(
                text = "Product Details",
                modifier = Modifier.padding(bottom = 8.dp)
            )
            
            // Show product information if available
            if (id != null && name != null) {
                Text("Product ID: $id")
                Text("Product Name: $name")
                
                // Additional product details could be added here
                // For example: description, price, specifications, etc.
            } else {
                Text("Error: Product information not available")
            }
            
            // Back button
            Button(
                onClick = onNavigateBack,
                modifier = Modifier.padding(top = 16.dp)
            ) {
                Text("Back to Products")
            }
        }
    }
    
    data class Product(
        val id: Int,
        val name: String
    )
    
    
    @Composable
    fun ProfileScreen(
        userId: String?,
        onNavigateBack: () -> Unit
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = 50.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Top
        ) {
            // Display the user ID passed through navigation
            Text("Profile for user: $userId")
            Button(onClick = onNavigateBack) {
                Text("Go Back")
            }
        }
    }
    

How this example renders

Above is just a snippet of the code to view the full code, you need to go to my GitHub page and look at the chapter9 multiple.kt file.

Optional Arguments

composable(
    "profile/{userId}?showDetails={showDetails}",
    arguments = listOf(
        navArgument("userId") { type = NavType.StringType },
        navArgument("showDetails") { 
            type = NavType.BoolType
            defaultValue = false
        }
    )
) { backStackEntry ->
    val userId = backStackEntry.arguments?.getString("userId")
    val showDetails = backStackEntry.arguments?.getBoolean("showDetails") ?: false
    ProfileScreen(
        userId = userId,
        showDetails = showDetails,
        onNavigateBack = {
            navController.popBackStack()
        }
    )
}

Tips for Success

• Use meaningful argument names
• Always handle nullable arguments
• Consider using type-safe arguments
• Keep argument names consistent

Common Mistakes to Avoid

• Forgetting to define argument types
• Not handling nullable arguments
• Using wrong argument types
• Forgetting to pass required arguments

Navigation vs State Management

It's important to understand the difference between passing arguments through navigation and managing state:

• Navigation Arguments:
  • Used to pass data when moving between screens
  • Data is passed once during navigation
  • Arguments don't automatically update if they change
  • Good for initial screen setup or one-time data passing
• State Management (covered in Chapter 10):
  • Used to maintain data that needs to stay in sync
  • Data can be updated and shared between screens
  • Changes are reflected across all screens automatically
  • Good for data that needs to be shared and updated

Example: If you're passing a user ID to a profile screen, use navigation arguments. If you need to share and update user preferences across multiple screens, use state management (which you'll learn about in Chapter 10).