@Environment in SwiftUI - What is it? How to use it? (2020)

hi there today we will focus on the concept of environments in swift ui and we want to mainly understand where it is used and how we can take advantage of it now the best way to explain this concept is by an example and that's why i created a served ui project as you can see currently it's only displaying this text hello world on the screen but let's modify it a bit let's say we put this text into a vertical stack [Music] like so and we would set the font for the vertical stack to large title now you will immediately notice that the text adapts to the font although i set the font to the vertical stack actually what we're doing here is already taking advantage of the environment we're setting the environment value for the key font on the vertical stack and since we set the environment key and value on the vertical stack the whole subview tree of the vertical stack will be able to read this off as well so text is able to read off this font but even if you had a another layer like for example another hdac and we would have another text inside of here you will see it will also have the font just as the text one layer above it now you might think this is kind of like a global dictionary but it is not and the reason why it's not is you're really only passing this down to the subview tree of that particular vertical stack so in case we would have another vertical stack and we would have this vertical stack inside of that other vertical stack and i would have a text in here like so obviously this won't be able to read from this because this vertical stack is one layer above the vertical stack so it can't read from this environment now let's go back to the initial setup so i will remove all of this and get it back to the hello world example so even at this point the text is already able to read some environment keys and values so if you want to see it for yourself what you can do is add this transform environment modifier and here for the key we will basically just add self and inside of this closure we will simply just dump what we get now let's run this all right so as soon as this is running on the simulator you'll see you have a lot of key keys and values that you can already read off and one of the keys is color scheme so let's search for it [Music] as you can see there's also this property key color scheme and it's currently set to light so that means we do have some environment keys and values that we can already read off so how do we read it off so first of all let's remove this and create this property wrapper called environment [Music] and here we have to define the key path and it's going to be color scheme and we will store it as a variable called color scheme as well like so now what we can do now is we can set the color [Music] and we can set the color based on the color scheme so if it's dark we can set it to orange otherwise we can set it to blue [Music] now let's run this on the simulator and yes we will see it's blue right now and if you would change this to a dark mode we can do this by selecting this toggle and choosing dark you will see that the font automatically adapts to the color scheme so in some way it is also like a state property in the sense that whenever one of these change the whole view is rebuilt and therefore we also have a new text with the color orange nice now lastly i would also like to show you how you can propagate values down from a parent view to the subview tree yourself by defining your own environment keys and for that i would like to first create a new sub view and i will call this one child view it's going to be of type view and here we will also have the body and all i will do here for now is just create a circle and we will use this child view inside of the body of the content view which is our parent view now we also do not need this anymore so i will remove this and let's resume this all right nice now in this example what i want to do is i want to be able to set the circles frame from a parent view so even if we had something like a vertical stack and we have the child view inside of this vertical stack and maybe there's even a much more nested layer and the child is somewhere far far down from the grease deck when we want to be able to set the circle size for example from here we want to say something like circle size and passing this should also set the size for the circle of the child view now the first thing we need to do for this is define an environment key and the way we're going to do this is by simply defining a struct called let's say circle size key and it has to conform to the environment key and all the environment key basically needs is the default value and that's what we are going to provide inside here as well so we will simply say static let [Music] default value be equal actually the we have to also define the type in this case since we want to change the size of the circle it's going to be a cg float and let's say the default one is 50. next we need to create an extension on the environment values and the way we're going to do this is by simply saying extension environment values and inside of here we're going to create a computer property called circle frame size or actually let's just name it circle size and it's going to be of type cg float and in here we need to provide a getter and setter [Music] so when it's retrieved we are going to say self at these at this key that we defined at this environment key and when it's set we basically want to set it to the new value that we get so we will say it's equal to the new value like so now at this point we can already take advantage of it so we could simply go into our content view the vertical stack and then say environment and this will take our key path and here we can choose our circle size and we can give it a value like 100 and we can try to resume and nothing will happen at this point because the child will doesn't really read off from this environment and it doesn't adjust the circle to this environment value so what we need to do in the child view is we have to read this environment by using this property wrapper environment and we have to define the key path in here which is going to be circle size it's going to be a variable called circle size like so and in here we can say the circle frame and then we can set the width to the circle size and the height also to the circle size now let's resume this again now here you can see that it's actually reading off the circle size and setting its circle frame based on it so if i would go to this vertical stack and set the environment circuit size to 50 it would get smaller and similarly bigger if the valley gets bigger now there's a nicer way than writing this now remember uh back in the beginning we didn't say dot environment font and then here for the value large title instead we went directly here and said font and we can also do that by simply creating an extension on the view so let's do that [Music] so we create an extension on the wheel and we will create a function inside of it now we'll simply call this one circle size and it should take the size as a cg float [Music] but remember it's since these modifiers whenever we apply them to the view they also have to return another view because otherwise it wouldn't conform to the view protocol so here we have to also say return some view [Music] and all we have to do in here is basically just more or less just copy this and paste this in here and remove the dot and instead of the 500 we just pass in this size and now we can go back to the content view and remove this environment and simply say circle size and then some value and if we try to resume the automatic preview you will see it works just as well as the previous one now i know this is not the best use case for this but um i just want you to know how this works and how you can implement it yourself this obviously comes handy if you have a huge subtree of views and you want to be able to change something on the top level and the subfield should also be able to adapt to it alright so that's really all that i wanted to show you in today's video i hope this was helpful make sure you subscribe to the channel so you get notified when new content arrives and i will see you in the next tutorial thank you for watching

Channel: BeyondOnesAndZeros

Views: 3,170

Keywords: swiftui environment, swiftui 2.0, swiftui, swiftui @environment, @environment, understanding swiftui environment, demystifying swiftui environment

Id: SUiITSkAqAo

Length: 11min 49sec (709 seconds)

Published: Mon Sep 21 2020