Move between screens predictably.

Navigation is the structure that lets users move across list, detail, search, and settings screens. At junior level, focus on simple routes and correct back behavior.

Navigation model

Think in destinations. Each destination owns one screen. The route identifies where the user should go.

Starter code

@Serializable data object BusinessListRoute
@Serializable data class BusinessDetailRoute(val id: Int)

@Composable
fun CatalogueNav() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = BusinessListRoute
    ) {
        composable<BusinessListRoute> {
            BusinessListScreen(
                onOpenBusiness = { id ->
                    navController.navigate(BusinessDetailRoute(id))
                }
            )
        }
        composable<BusinessDetailRoute> { entry ->
            val route = entry.toRoute<BusinessDetailRoute>()
            BusinessDetailScreen(id = route.id)
        }
    }
}

Practice task

• Create list, detail, and settings destinations.
• Navigate from list to detail with an id.
• Use the system back button and verify it returns to list.
• Write down what data belongs in a route and what should stay in state.