Louis Duboscq
Louis Duboscq


Louis Duboscq

Pass parameters while navigating with compose

Pass parameters while navigating with compose

Louis Duboscq's photo
Louis Duboscq
·Oct 13, 2021·

2 min read


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 .

   startDestination = "main"
) {
 ... routes here

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


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:


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

   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 :


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.


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


Call routes

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


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

composable("main") {
    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")


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

Feel free to ask me any questions about this.

I also talk about TDD, KMM and build things with these techs. Follow me to stay in the know.

Happy building

cover image @anniespratt on unsplash

Share this