ScreenModel: Kotlin Multiplatform ViewModel Solution for Android/iOS - Voyager

so you have started working on a cly multiplatform project for Android and iOS but don't know how to integrate vew model for both platforms I'm going to teach you that but also how to combine it with other dependenc injection Frameworks like a coin for example stay [Music] tuned in some of the previous videos on my channel I have introduced one amazing KMP Library called Voyager that's a primarily a navigation library but it also offers some additional apis like a view model in this case it's called a screen model but it's basically the same thing it allows you to store and manage UI related data in a life cycle conscious way the primary purpose of a view model is to separate the UI related data from the UI the best part of this screen model is that it's Android independent and doesn't require an activity or fragment to work which means you can use it in both Android and iOS without any issues okay so here I already have a simple project which I have generated with a gamp wizard I have already added dependencies for a voyager Navigator transition screen model but also one more artifact for working with a coin library and of course a coin core Library which that artifacts depend on I will cover dependent injection with a screen model at the end for the demonstration purposes we're going to have two composable screens so let's create here a screen package and two more packages inside for a home screen and a detail screen let's also create those same composable screens as well each one of them will Implement a screen interface of course so if you haven't watched my previous video about Voyage navigation be sure to do it in the content function we're going to Define how this screen will look like the home screen screen will be quite simple a text on the center of the screen if we click anywhere on the screen we're going to use the navigator to navigate to the detail screen let's also declare a detail screen it will have a slightly different UI I'm going to add a scaffold a top bar and a back arrow so that we can go back to the previous screen when we click on that button we're going to pop the current screen from the backstack and the previous home screen will appear again great now inside the app cotlin file we need to set up a basic navigation in our application so let's call the Navigator and pass the home screen as a start destination perfect finally let's create a view model so I'm going to create only one for the detail screen and this class needs to implement a screen model interface and that's all next inside we can call in it block and print a simple message in the console so that we can know when this view model or a screen model uh is initialized plus we can also override the on dispose function and print another message when this screen model gets destroyed perfect now for the demonstration purposes I'm going to add here one property that will be observed from the UI this property will be updated 2 seconds after the view model is initialized you can see that we are also able to access the ctin scope within this screen model which is similar to The View model scope that we have in Android it feels like at home right now let's go back to the detail screen initialize this view model and observe that property so to initialize a view model we can call remember screen model composable function and pass the view model or a screen model we're going to also observe that property directly in inside the text on the center of the screen great finally let's run the application on a Android emulator first and observe the console logs to see how this view model will behave exactly when we click somewhere inside the home screen we are going to get to navigate to the detail screen and as soon as that screen opens we're going to see a message that the view model is being initialized if we wait 2 seconds you will see that the number here will increase from 0 to 10 if we go back to the home screen then the view model will trigger on this pose function and the instance of a screen model will be destroyed by the way the screen model also survives a configuration change the same way as a regular Android view model so if we rotate the screen you will see that the number will stay the same and it will not reset to zero awesome I'm going to also open up the X code and run the iOS simulator to test that out on a different platform as well we're going to repeat the same thing as you can see as soon as we open up the detail screen then the screen model will initialize and as soon as we go back the instance will be destroyed it works the same way on both platforms the next thing I'm going to show you how to initialize a view model once and dispose its instance after our Navigator object gets destroyed which means we can share the screen model instance across multiple composable screens which is something like a share view model to achieve that we just need to change one thing the way we initialize a view model or a screen model so instead of calling that the remember screen model function we're going to use a navigator object and call remember Navigator screen model function instead that way we're going to tie the instance of the screen model to the Navigator itself now if we launch this application once again navigate to the details screen and you will see here a message about the initialization however if we go back the instance will not be destroyed and if we open up the detail screen once again the number 10 will be saved and it will not reset so only after I close this whole application and the Navigator object gets destroyed only then the screen model will print the message for disposal perfect and the last thing that I want to show you here is how to combine one of the dependence injection libraries with a voyager screen model in this case I will use a coin library but Voyager also supports other ones as well so you can check their official documentation for more information let's say that we have some API service class that is used to trigger a network request and fet the data I'm going to create here a dummy class and pretend that we are doing some Network work to fet the information then after that this class needs to be injected into the view model from which we're going to trigger that function after the initialization if you want to provide this dependency by using a coin Library you could create the factory module and pass it directly to the view model which will be initialized through the coin Library we could also try to provide this API service class as a singlet ton but it's your choice anyhow afterwards you would need to call a start coin function and provide that the same module this function needs to be called after the application launch on about Android and iOS which is why the app cotlin file is a good place to start after we have provided the necessary dependency now we need to get the instance of that view model from the composable function then there are two functions on our disposal get screen model and get Navigator screen model function depending on how you want to use its instance if you launch the application once again you will see that everything will work the same as before only in this case we have also triggered a damy network request to fetch some additional data and there you go personally I think that the screen model API is quite easy to implement and use for both platforms what do you think about this Ro would you consider a screen model in your project comment down below and let me know other than that be sure to like this video but only if you find it helpful thank you for [Applause] watching lay me down to rest

Channel: Stevdza-San

Views: 5,068

Keywords:

Id: L39NrirKohg

Length: 8min 47sec (527 seconds)

Published: Mon Mar 11 2024