Navigation

In the previous tutorial, we built the shared data layer with Ktor, SQLDelight, and offline-first sync. The data layer works, but the UI is basic. You can only see a list of notes with a “+” button that creates placeholder notes. In this tutorial, we build a proper UI layer. You will add navigation between screens, a note editing screen with a color picker, pull-to-refresh sync, and loading and error states. All of this works on both Android (Compose) and iOS (SwiftUI). ...

Your app has multiple screens. A note list, a note detail, a settings page, a profile screen. Users need to move between them. On Android, Jetpack Compose uses navigation-compose. On iOS with SwiftUI, you use NavigationStack. Two different APIs for the same concept. In Compose Multiplatform, you can share navigation too. The navigation-compose library now works on all platforms — Android, iOS, Desktop, and Web. Navigation Options in CMP There are several navigation libraries for Compose Multiplatform: ...

The task manager works. You can add tasks, complete them, delete them, search, and filter. But it doesn’t feel polished. Screens change instantly. Deleting a task is jarring. There’s no feedback when you complete something. This tutorial adds the polish that makes the difference between a homework project and a real app. What We Add Feature What It Does Navigation transitions Screens slide in/out smoothly Swipe to delete Swipe a task left to delete it Animated task completion Checkbox animates, strikethrough fades in Animated list changes Tasks slide in/out when added or removed Empty state animations Gentle fade-in when list is empty Dark mode Follows system theme Snackbar with undo “Task deleted” with undo option Navigation Transitions By default, screens appear instantly. Add slide transitions: ...

Welcome to Part 2 of the series. You can now build beautiful single-screen apps. But real apps have many screens — a home screen, a detail screen, a settings screen, a profile screen. Navigation is how you move between them. In this tutorial, you will learn everything about Compose navigation: Setting up navigation Creating screens and routes Type-safe navigation with Kotlin Serialization Passing data between screens Bottom navigation bar Nested navigation graphs Back stack management Best practices This is a long tutorial. Take your time. ...