Navigation between screens

The version that almost works

Pocket Notes needs two screens: a list, and an editor. The obvious first attempt is a Boolean.

1var editing by remember { mutableStateOf(false) }
2
3if (editing) EditorScreen()
4else ListScreen(onOpen = { editing = true })

Run it and it looks perfect. Tap a note, the editor appears. Then a user presses the phone's Back gesture, expecting to go back to the list, and the app closes.

Android has no idea you changed screens. As far as it is concerned there is one Activity showing one thing, and Back means "leave".

You could handle Back yourself. Then you need to handle it for the third screen, and the fourth, and remember which one came from where, and cope with the phone being rotated in the middle. That bookkeeping has a name — the back stack — and there is a library that does it properly.

Three pieces

Add one dependency — Pocket Notes and Focus Flow both have it already:

implementation(libs.androidx.navigation.compose)

Then there are exactly three things to learn.

A route is a piece of text that names a screen. "list". "settings". That is all a route is.

A NavHost is the composable that holds every screen and shows whichever one the current route names.

A NavController is the object you ask to move. It keeps the back stack.

The smallest real example

1@Composable
2fun PocketNotesApp() {
3  val nav = rememberNavController()
4
5  NavHost(
6    navController = nav,
7    startDestination = "list"
8  ) {
9    composable("list") {
10      NoteListScreen(
11        onOpenNote = { nav.navigate("editor/$it") }
12      )
13    }
14    composable("editor/{noteId}") {
15      NoteEditorScreen(
16        onDone = { nav.popBackStack() }
17      )
18    }
19  }
20}

rememberNavController() survives recomposition and rotation, so the pile of screens is not lost when the phone turns.

navigate("editor/3") pushes a sheet on. popBackStack() lifts one off. The system Back gesture already calls popBackStack() for you — you write nothing.

Carrying a value to the next screen

The editor needs to know which note. That value rides inside the route.

{noteId} in the route string is a slot. When you navigate to "editor/3", Navigation pulls 3 out of the address and hands it over.

Declare its type so a route expecting a number can never receive a word:

1composable(
2  route = "editor/{noteId}",
3  arguments = listOf(
4    navArgument("noteId") {
5      type = NavType.LongType
6    }
7  )
8) { entry ->
9  val id = entry.arguments
10    ?.getLong("noteId") ?: 0L
11  NoteEditorScreen(
12    vm = vm,
13    noteId = id,
14    onDone = { nav.popBackStack() }
15  )
16}

That is the genuine code from Pocket Notes.

Sharing state between screens

Look at where the ViewModel is created in Pocket Notes:

1@Composable
2fun PocketNotesApp() {
3  val vm: NotesViewModel = viewModel()
4  val nav = rememberNavController()
5
6  NavHost(navController = nav, ...) { ... }
7}

vm is created outside the NavHost, so both screens receive the same object — one ViewModel, one database connection, one source of truth. Save a note in the editor and the list behind it is already correct before you have finished the Back gesture, because Room pushed a new list to the StateFlow they share.

Call viewModel() inside a composable { } block instead and you get a ViewModel scoped to that entry in the back stack — a fresh one per screen, cleared when the screen is popped. Focus Flow does exactly that, because its three tabs have nothing to share.

Both are correct. Choose by asking whether the screens need the same facts.

Tabs are different

Focus Flow has a bottom bar: Timer, Stats, Settings. If tapping a tab simply called navigate(), every tap would push another sheet on the pile, and Back would walk you through your entire tab history like a browser.

1private fun openTab(
2  nav: NavHostController,
3  dest: Destination,
4) {
5  nav.navigate(dest.route) {
6    popUpTo(nav.graph.startDestinationId) {
7      saveState = true
8    }
9    launchSingleTop = true
10    restoreState = true
11  }
12}

Highlighting the current tab

The bar has to know which tab you are on, so it watches the back stack:

1val entry by nav.currentBackStackEntryFlow
2  .collectAsState(initial = null)
3val route = entry?.destination?.route
4  ?: Destination.TIMER.route

A Flow of "what is on top right now", collected into state. Everything you learned in Lesson 4.3 applies here unchanged — the navigation state is just more state.