Jetpack Compose Cheat Sheet: Part Four

Everything you need to know about navigating between different composables used in Jetpack Compose.

Jetpack Compose Cheat Sheet: Part Four

Hola Composers,

There is no better way to learn anything new than learning with the whole community and watch them grow together with you.

Till now we have gone through many different components, composables, properties, and, functions and seen them in action in their code snippets. But the question of the hour is how one can navigate from one screen to another in Jetpack Compose.

Healthy links to previous three blogs or cheat sheets:

1. Jetpack Compose Cheat Sheet: Part One
2. Jetpack Compose Cheat Sheet: Part Two
3. Jetpack Compose Cheat Sheet: Part Three

Coming back to the topic,

How to navigate back and forth in Jetpack Compose?

The sweet and simple answer to this curious question is this particular blog you are reading currently, you will get all the answers till the end of this blog.

So let’s start without a further ado !!!

You must be aware of Navigation Component that we can use in Android native which provides us functionality to build navigation graphs and nav host to host various screens in your application. That same library or component is also available in the form of Navigation for Compose library specifically to use in Jetpack Compose apps. You can navigate between different screens or composables using this library and leverage the benefits of its infrastructure and features.

Step 1: Implement the dependency in your app module’s build.gradle file:

Step 2: Create a NavController object

A NavController is the first thing we need when we want to integrate navigation between our composables because it maintains the backstack of our composables and remember when to navigate to which screen and pop to which screen. We can create a NavController object using the remember property which we saw in our previous blog:

Step 3: Prepare a NavHost composable to list down destination composables

Every NavController object should be linked with a single NavHost composable. It provides us the facility to define start destinations and further in the block all the available destination composables through which one can navigate back and forth in the app.

• You can create an AppScreens class to list down their specific route names in it for the sake of conciseness:

• Then you can create a NavHost composable in one of your initial composables:

Step 4: Navigate to next composable

Now when you are ready with NavController, NavHost, and your destination composables, you can start navigating from one composable to another composable using NavController’s navigate(“routeName”) method:

Friendly Note: You should only call navigate() method on the composable’s callback method at the very top instead of lower under the composable structure to avoid recomposing of that composable each time when navigate() method is called.

Step 5 (Optional but Required as well) : How to pass some data between composables using Navigation?

And how on this earth, we don’t want to pass any data between our composables? We almost do, each time !!! And we do have the solution of it as well in a crispier way using the NavController. And here is how you have to pass data from one composable and receive it in the another composable:

• Also update your AppScreens.kt file to include this useful method of appending string data with the destination route name in navigate() method.

Friendly Note: That routeWithArgs() method will only work for strings if you have some strings data to pass from one composable to another. And for other data types and models you have to append them manually in the destination route. I will update this doc for other data types as well, ASAP.

And this is how we reached to the end of another exciting part of this awesome series of cheat sheet compiled in a informative blog.

And again we are not yet come to the end of this series as there is lot to cover and there is lot to learn in Jetpack Compose and I will definitely keep learning this awesome toolkit and upgrade our knowledge and skill base.

Do not forget to clap, appreciate, and re-share this, if you read and liked my content and the way to convey the code snippets and their nuisances in detail.

And don’t forget to clap and appreciate the blog if it helps you in any sense. You don’t know but your claps matters, a lot !!!

And if you are an avid reader and crave quality content from all over the world, then you should start your journey from here itself by joining Medium through my referral link.

Kudos !!!