Custom Navigation For Compose Multiplatform: No External Dependencies! Android, iOS, Desktop
In this quick tutorial we'll build a simple system for navigating between composable screens in a Kotlin Multiplatform project, utilizing a shared Compose UI. This navigation system can be shared between Android, iOS, and Desktop apps. This lesson assumes you have a basic understanding of Kotlin and Jetpack Compose.
Simple-Navigation-CMP Repository:
github.com/MaxLangleyDev/Simp...
Empty Project Folder, generated with KMP Wizard (Select the three dots and choose download):
github.com/MaxLangleyDev/Simp...
If you're having trouble setting up your project, I have a step-by-step video to walk you through the process: • Make Apps for Android,...
Additional resources:
Android ViewModel for Compose Multiplatform:
www.jetbrains.com/help/kotlin...
MOKO MVVM Architecture Components:
github.com/icerockdev/moko-mvvm
Follow me on LinkedIn!
/ maxlangleydev
Chapters:
0:00 - Intro
0:22 - Defining The Sealed Interface
1:36 - Building The Nav Controller
5:42 - Composable Screens
6:22 - Setup NavController In App
8:39 - Running The App
9:08 - Closing Thoughts
Пікірлер: 9
Another great video. Thank you
@MaximumDevelopment
Ай бұрын
Thanks for the support!
Great content. While watching and implementing can understand how the compose navigation library written for android.
@MaximumDevelopment
22 күн бұрын
Thank you! I’m glad you found it helpful.
Wow! Great video. I use Avenger for common navigation. I didn't know what you shared is supported.
@MaximumDevelopment
Ай бұрын
Thank you! It's a great time to be a multiplatform developer. There's so many excellent options available to us.
@frank4pickerson
Ай бұрын
@@MaximumDevelopment yes, love how clear you are in your explanation. So crystal clear!
what happens when you got 50 screens? we list them all in the App component?
@MaximumDevelopment
2 күн бұрын
Great question! This could warrant its own video but here are my thoughts. For starters, we could implement our custom nav graph in its own composable, and pass our state into it. This would clean up our App component, but we would still have to deal with a large, unwieldy list of screens elsewhere. We actually have this same problem with most navigation libraries. Going beyond this, we could implement a series of nested nav graphs, breaking up our monolithic graph into smaller chunks (where navigation from certain screens would branch into different graphs). This is just one possible solution. If it were my project, I would also consider how many standalone screens could be reduced to sub-screens (removing them from the graph, and handling their visibility within their parent composable). As always, there could be many solutions to this, with differing pros and cons. I’m curious how you would approach solving this. Thank you for watching, and for your thought provoking question!