Navigation in Jetpack Compose

In this reading, you will learn about passing the arguments from one composable destination to another, along with the coding examples. You will also be introduced to different argument types supported by the Navigation component.

🟢 ANDROID WITH MACHINE LEARNING! (COURSE)

🟢 KOTLIN INTERVIEW BOOTCAMP! (COURSE)

To help you understand, I am going to extend the previous example of navigation by passing an order number from Home Destination to Menu Destination.

Defining a constant argument in Destination

Defining a constant argument in Destination is an optional step but it helps organize the arguments and avoid name mismatch errors. It also helps to select the relevant arguments that can be passed to a specific destination.

In this example, the order number is passed to Menu Destination, so I will add a constant variable in the Menu object in the Destinations file. The important point is that although the argument will be of integer type, its name is String.

    const val argOrderNo = "OrderNo"

Below you will find the complete object code for this step containing the argOrderNo constant.

object Menu : Destinations {
    const val argOrderNo = "OrderNo"
    override val route = "Menu"
}

Adding the argument to the NavHost

Arguments need to be specified in NavHost to be utilized. For example, if the route specified in the composable function calling the Menu.route in the MainActivity is the following:

Menu.route + "/"

You append the menu route with the argOrderNo. So, it becomes:

Menu.route + "/{${Menu.argOrderNo}}"

The string that will be formed from the above expression will be like:

"Menu/{OrderNo}"

Adding the OrderNo to the MenuScreen

The order number argument can now be added to the MenuScreen composable. It can be then used in the composable. For example, to display the order number in the Text object, the following code would be used:

@Composable
fun MenuScreen(orderNo: Int?) {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Menu List Order $orderNo",
            fontSize = 32.sp
        )
    }
}

Extracting the Argument and passing to the MenuScreen

The complete code for the composable function is:

composable(
    Menu.route + "/{${Menu.argOrderNo}}",
    arguments = listOf(
        navArgument(Menu.argOrderNo) { type = NavType.IntType}
)) {
    MenuScreen(it.arguments?.getInt(Menu.argOrderNo))
   }

The arguments is a list of nav arguments containing their type. The arguments are specified using the function navArgument and passing the Menu.argOrderNo, which you used above. You also set the type to NavType.IntType in the trailing lambda.

navArgument(Menu.argOrderNo){ type = NavType.IntType }

Note that the default argument Type is String when type is not specified.

The value of navigation argument is then passed to the MenuScreen composable by using the getInt method.

MenuScreen(it.arguments?.getInt(Menu.argOrderNo))

Updating the navigate function to contain the argument

Now when the navigate function is called, the argument can be specified as part of the route.

navController.navigate(Menu.route + "/10")

Conclusion

In this reading, you learned about passing the arguments from one composable destination to another, along with the coding examples. You also learned about different argument types supported by the Navigation component.

İbrahim Can Erdoğan

LINKEDIN

YOUTUBE

UDEMY

GITHUB