EnvironmentObject in SwiftUI

hello everyone and welcome to adam shaw weekly in this video i'm going to show you that how you can use environment object what exactly is environment object and what's the main purpose of environment object in stuff ui so let's go ahead and take a look at a very simple example if you have some sort of a view hierarchy where you have a parent view you have a child view you have another sub child grandchild and you have another child for the parent and a sibling and this is kind of like the relationship all right now what happens if something happens in a more nested view meaning something happens over here you click a button you turn on the search or off the switch you get authenticated but you sign out and now you're not authenticated something happens in that small view and this view is like hey i need to update so this person this view over here which is whatever view number three or whatever you want to call it needs to update but how how will you update it if something is happening over here how does this view get that thing get a notification that i need to render i need to re-render i need to update i need that value well there is a way to do it this view is going to send the value up it's going to send the value up and then the parent is going to send the value down right and this is quite possible and this can be done but obviously we're doing a lot of work we are sending the value up we're sending the value up we're sending the value down and if there was another view somewhere down who needed that particular value then we have to send it down and then we will have to send it down again what if there is a place an environment object which is kind of like global environment object which is global so if this view does something like changes the property it just goes ahead and write in the environment object and then whichever view is interested in that property it's just going to go subscribe to it but hey if that object changes you gotta let me know also so instead of hopping around and sending the value up up up down down down we just read it from one same object so that's the whole concept of the environment object in surf ui which is pretty much the same exact thing if you're using reactant redux so redux is a global container in this case the environment object acts as a global container where you can store the values and then whoever needs to get that value when that value changes it can just subscribe to it so let's go ahead and first take a look at our first approach where we are not using the environment object now this is our page we have a main screen and the main screen does have a stack and it's simply displaying main screen that's pretty much it we will create two different views one of them i will call it light view and this will be responsible for just displaying a light bulb whether the light bulb is on or off this means we have to implement the body which is going to return a some sort of a view and we can return a group or we can return a v-stack or v-stack within a group that is perfectly fine but somehow this needs to decide whether to show a particular image or not so we can say if it's on then we are going to go ahead and return you the image which is filled with yellow color else we will just go ahead and return something that is an image which is not really filled there we go we still have to declare the is on property because we haven't done that and you may end up doing something like this is on which is a boolean property but in this case the light view is only responsible for displaying a particular view either this image control or this image control it's not really responsible for changing the value of is on so it doesn't really have to be binding so we're just passing it down to the is view control so now if we go over here we can go and make sure that first of all there is some sort of a property called state private var is on boolean starting with false and then we will go ahead and use the light view passing in is on what we are trying to do is that we are trying to create a scenario which kind of looks like this we have a parent view which is our main screen we have a light view which we just created and we will have another view so this is light view let's go ahead and write it out over here lb light view and this will be a switch that we're just going to create so light view is simply displaying the image whether it is filled or it is not filled the switch which will come at the bottom this control will be right over here will be simply a switch or a toggle and whenever we toggle we need to turn this light on or off so based on something that the switch will do which will be on or off but this light view control will get the value but how we already learned that the way that you will get the value is you're going to send the value up to the parent and then the parent is going to send the value down so this part is actually done because we are sending the value down you can see right there but we still need to implement our toggle so let's go and implement a light switch view control so i'm going to go over here it will be a structure i will just call it light switch view some view and i'm just going to go ahead and use toggle and in toggle you also have to use is on so for right now i'm just going to say constant false and empty view because we don't really want to display any label i will also make sure this is fixed size so it's not completely end to end and we will go ahead and also provide some sort of the width so make sure that this is inside a v-stack and the v-stack we can provide some sort of a width and now we can actually go ahead and implement this over here so light switch view all right there we go so here's the switch and here's the bulb they're both siblings now the problem is that you do have the light switch view but you're not really passing any bindable property over here so you should be passing something to the light switch view so we can turn on and off the property and that is where the binding is going to come into play i'm just showing you all of these steps so that you can understand that what we have to go through if we were to use binding to solve these problems and then later on i will show you that how this problem can be much easily solved by using a environment object so we end up creating a light switch view inside you have to pass it is on and then we can go ahead and change this to is on this means that every time you toggle the is on property will get changed since this property is marked with binding the person who is calling this property passing this property that person will also get the change property so let's go ahead and say is on and it's on this means that every time the light switch view is going to change something this property the state property gets changed when it gets changed the body gets rendered and now you're sending in the new value to the light view which can make it turn on and off let's go ahead and run this and see if it works or not great so this is working you can see that both siblings are talking to each other but they are using the parent to talk to each other they're not talking to each other directly the switch control over here the toggle or the light switch view is passing this value back up to the main view main screen and the main screen then passes it down to the light view which turns the light on or off so this is all good and this is working perfectly fine the problem that you saw is that we have to pass the value up and down all the time and if we had a little bit more nested hierarchy of multiple controls two three four level deep then we have to pass up up up down down down so that will become cumbersome it's possible that you can do it obviously but it will become a lot of work so what we end up doing is that we create some sort of environment object and the environment object has to be a class it can be called anything you want and it has to be conforming with observable object and the reason that we're using observable object is that you can subscribe to it inside this particular class or the global object that you're creating you can create some properties whatever properties you want to create i'm just going to create a property call is on and make sure that you mark that property with published this means that whenever this property gets updated that's changed whoever is subscribed to it whoever is listening to it will get the new property the other thing you have to do is you have to make sure that you inject this object on the root view so once this object is inserted or injected in the root view so let's say if we have this diagram you have to inject the environment object on the most top level view so that all the other child views will then know about the environment object so let's go to the introduction to which which is basically our app class and we're saying main screen dot environment object and then in white environment object we're just injecting settings object that we just created now if you're working with xcode preview you have to make sure that in the preview you also injected so that it works so environment object and settings so this is good to make sure that the actual preview is working correctly okay all right so once we have created the environment object the next part that we want to do is to help use it so what i'm going to do is i'm going to go to the login view and i'm going to remove that and i'm going to go ahead and also make sure that we don't have this something will go over here we are no longer passing values down to the light view we can now read the value directly from the environment object so i'm going to go ahead and use the new environment object property wrapper var settings settings and this is automatically going to get populated because you already injected it on the root view so you don't have to worry about populating this again over here we have to make sure that we update the condition and now we're checking for settings dot is on which is one of the properties available on the environment object so if the global environment object property is on is true then you do this else you do this so light view is done the next step is a light switch view and we're going to do the same thing for light switch view we're going to make sure that we are not passing anything the only thing that we're going to get access to will be the environment object and over here we are simply going to say settings dot is on this means that every time you toggle switch on or off it is going to update the environment object once the environment object is updated all the views that are listening that are interested in the value from the environment object will get re-rendered which in this case will be the light view now let's go over here and make sure that we are not really passing anything so let's go ahead and remove the state we don't need that let's go ahead and also remove the light view let's go ahead and remove the light switch view let's go ahead and build it and make sure that you have this particular line over here which is main screen dot environment object and passing in the settings so that it can initialize your environment object let's go ahead and resume it and see that if it works exactly like before or not and you can see that it is working exactly like before but this is a much simpler solution and the reason it is simple solution is that we eventually end up creating an environment object a global object a global container which is accessible by any view so we don't have to pass it up or down anywhere now does that mean that you should completely get rid of the state variables and you should always use environment object for everything no absolutely not the environment object should only be used at the global container this means that you should only put the stuff inside the environment object which is needed by other views by multiple views so this can be maybe you're adding some favorites in your application and you want to display the favorites in multiple places that's perfectly fine some people try to put also username in there or some sort of a token that's fine also authentication token that's fine also so things that will be shared among different views all right so there you go hopefully now you have a much better understanding of what exactly is the environment object in surf ui hey if you like this video and want to support my channel then check out my udemy courses i have courses on sift ui of course it's on rx swift mvvm design pattern and i've just released a new course on writing clean code but i have a lot of different courses which covers sif ui mvvm data structures and firebase and combine rxf ar kit so you will be able to find any type of course that you're looking for i also have courses on flutter and my new course on flutter which is awesome course with firebase will be available next week so the next week basically around february 9th it's going to be available on my birthday so that's great and you can actually access that course but you can actually take a look at all these courses thank you so much for your continuous support and i really hope that you enjoyed this video

Channel: azamsharp

Views: 1,013

Keywords: swiftui, ios development, swift language, swiftui tutorial, swiftui 2.0

Id: bFZhl_-sARQ

Length: 17min 3sec (1023 seconds)

Published: Sat Feb 06 2021