Louis Duboscq

Pass parameters while navigating with compose

Pass parameters while navigating with compose

Louis Duboscq's photo
Louis Duboscq
·

2 min read

Introduction

We'll just see 2 types of navigation allowed by compose-navigation.

  • Navigation by "hierarchy"

  • Navigation with parameters

First, we have to define a NavHost where we'll develop the nav graph builder .

NavHost(
   navController,
   startDestination = "main"
) {
 ... routes here
}

For the example, I create a simple screen to do our different navigations. It looks like this.

image.png

Navigation by "hierarchy"

This type of navigation is about organizing routes like a breadcrumb. For example, imagine we have a route that shows an object detail in a list. We can design the route as follows:

something_list/{something_id}

You need to define arguments and you can parse them using : backStackEntry.arguments.get

composable(
   "something_list/{something_id}",
   listOf(navArgument("something_id") { type = NavType.LongType })
) { backStackEntry ->
   val somethingId = backStackEntry.arguments?.getLong("something_id") 
      ?: throw IllegalStateException("id should exists")
   Text(somethingId.toString(), Modifier.center())
}

Navigation by parameter

This is another type of navigation. Here you pass parameters that are optional. That is to say for a route like this :

random_route?with_pre_filled_param={param}

You can even call it with :

  • "random_route?with_pre_filled_param=abc" or just

  • "random_route"

Parameters must be included using query parameter syntax ("?argName={argName}").

composable("random_route?with_pre_filled_param={param}") { backStackEntry ->
   val param = backStackEntry.arguments?.getString("param")
   Text(param ?: "default value", Modifier.center())
}

What there is to know : here I did not define the argument in composable because by default arguments are parsed as String.

Mixing

You can even mix the 2 types of navigation to have something like this :

"list/{id_in_list}?with_param={param}

Call routes

To navigate to a route simply call navigate to this route.

navController.navigate("my_route")

Here's the screen implementation with the three buttons shown at the beginning with the three buttons.

composable("main") {
  Column(
    Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.SpaceEvenly,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    val nullString: String? = null
    val string = "abc"
    val longId = 1L

    // navigate to full screen with text "1"
    Button(onClick = { navController.navigate("something_detail_route/$longId") }) {
        Text(text = "1") 
    }

    // navigate to full screen with text "null"
    Button(onClick = { navController.navigate("random_route?with_pre_filled_param=$nullString") }) {
        Text(text = "null param")
    }

    // navigate to full screen with text "abc"
    Button(onClick = { navController.navigate("random_route?with_pre_filled_param=$string") }) {
        Text(text = "abc value")
    }

    // navigate to full screen with text "default value"
    Button(onClick = { navController.navigate("random_route") }) {
        Text(text = "no param query")
    }
}
}

Conclusion

You now know how to pass parameters while navigating with Compose.

Also if you want to learn more about Jetpack Compose check out my best work at appkickstarter.com

Androidnavigation