Navigation In Compose Multi Platform Using Official Navigation Compose Library | KMP Navigation

hi everyone welcome back to the coding Ambitions I'm back with a new video so in this video we will discuss about navigation in compos multiplatform so earlier in my previous videos you can check out my on my YouTube channel so I have covered this topic before as well but in that case we were using the decompose library for navigation but with the release of 1 Point compose multiplatform 1.6.1 0 so you don't need to use any third party Library but still if you want to prefer if you like decompose you can use that but now if you suppose you are migrating from Android or if you are used to do uh development using the Android view models and MVM architecture then you don't need that so then you can use the similar things here right and if you are using the navigation as well there in the jetpack compos then you can use this libraries which are Now natively supported by compos multiplatform so in this video will cover uh navigation multiplatform sport so now we can use the same navigation Library which we were using in the jpeg compose right so we just need to add this Library if you see little bit changes are there you can see uh the libraries in the compos multiplatform have this this prefix actually this is their package so basically that that is involved in most of the libraries so if you see this one is the same one which we use in the navigation compos while using it for Jetpack compose so this is the latest version which is currently now in uh compose multiplatform 1.6.1 at the time making this video it's still in Alpha stage so it's still experimental right but we can use it so let's try to explore it so basically it's not if you have used it in Jetpack compose it will be the similar so but I have covered this video so that uh everyone will be aware about that so that uh so this compos multiplatform is also support the same jetpack based navigation right so basically this is the official sport by compos multiplatform for this so now let's try to use it so it will be similar to the way we are using it in the jetpack compos right so let's try to use it so suppose this is uh first of all let me show you to save the time I have already created this UI for you this is just a simple UI with list and detail we are displaying some list of users and the detail right So currently there is no navigation between them I just displaying the Leist screen right I have already included this UI so that we can save time because these are simple they are not difficult to make so let's continue with this first of all what we need to do is the same thing we need to remember the NV controller right then NV host similar things n controller and then you can see start destination right so in nav host if you if you don't know let me just revise few things for you so in Jetpack compose what we do is but still if you want to check out this navigation you can check out video on this navigation in Jetpack compose I have the video that already in my YouTube tutorial slist right so for every entry we need to add composable right and here we specify the root right so and here I will be adding the dummy data which I have already created I will just passing that directly from here let's pick up this from here and this UI will be for list right that you might be already aware about about this right then again one more composable that will be the detail but it will be passing one ID as well here okay so and you might already be knowing about this was this it provides SN back stack entry from this we need to get arguments and then from there what is the type of that we are expecting we need to apply that right we are expecting string here so we need to get string ID right but so uh in detail we are passing it as int right so we can use two in here and then we can add one call back as right so go back on go back so what we can do is we can use po backstack or maybe we can use navigate up P that is little bit safe version so this is pretty similar the way we are using the this navigation in the jetpack compos similarly we are using it here it's kind of just like migrating the same app to the compos multiplatform right but few changes will be required like using the resources and few other things as well so this is just simply you can see if I click on it it's going to the detail you can see back is working fine system back button is also working fine right let's try to run it now for iOS meanwhile I can just go through this UI which I have created this is just simple L column right I applied the content padding and vertical Arrangement items will be spaced by ADP and then I applied the items and that is looping over the item list of items then I in the card right these are simple things you can do then I'm just displaying a row there is one image and these two texts right similarly there is the details screen you can see it's again pretty easy right we are using just scaffold top bar so that we can display back button here in the top bar right and then just simple UI that is the column and then this name profile pick and the email right you can see it's working fine on our side as well right yep now let's try to run it on desktop yeah you can see it's working fine here as well cool now let's run it on web you can see it's displaying the list and then detail yeah you can see it's working pretty fine so we have checked it for all platforms it's working really well so guys you can see it's pretty easy now in the uh cod multiplatform as well while you sharing the UI you can uh share this the same navigation thing as well so if you are using it in Jetpack compos so you will be already familiar with this so it will not be tough for you so we don't you don't need to use any kind of third party libraries like wagger or decompose or pre-compose any of them right so if you are Android lover and using this navigation and using the mvvm so that's it's pretty good to you now use the compos multiplatform right so guys that's all about this navigation in compos multiplatform I will see you in the upcoming video with another cool content if you are new to my YouTube Channel please not forgot to subscribe if you have liked the video please please please like share and comment on it I will see you in the upcoming video till then bye-bye have a great time keep coding um [Music]

Channel: Coding Ambitions

Views: 511

Keywords: kotlin multiplatform tutorial, compose multiplatform tutorial, kotlin tutorial, kmm tutorial for beginners, compose multiplatform app, kmp tutorial, android studio, kotlin multiplatform android studio, navigation in compose multiplatform app, navigation in Kotlin multiplatform, kmp navigation tutorial, navigate between screens with compose multiplatform, compose multiplatform navigation, navcontroller in compose multiplatform, navigation in compose multiplatform

Id: w4bIYCrW_mM

Length: 8min 37sec (517 seconds)

Published: Sun Jun 23 2024