A user clicks a link on Twitter. Instead of opening a web page, your app opens directly to the product detail screen. Another user scans a QR code and lands on the signup page inside your app. This is what deep links do. They let URLs open specific screens in your app. In this tutorial, you will learn the difference between deep links and App Links, how to set up both, and how to integrate them with Compose 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. ...