Understanding BuildContext in Flutter

hey what's going on everyone GERD here welcome back to another video my apologies for not having it out on Wednesday because it's now Friday I have some family stuff going on so there also might be some delay in next week's video as well but we'll see so anyway in this one we're gonna be going over build context which is something that I've been talking about wanting to do for a couple weeks now and finally I feel comfortable enough to go over what it is how it works and an actual really common gotcha that I wasn't even aware of until researching everything for this video so the first question is well what is build context so it's kind of what it sounds like but it's also less than what it sounds like I guess at least to me personally know what context is simply the way in which we can get information about where our widget is in the grand scheme of our app so what does that mean or not and not we personally maybe yeah sure we can get it but it's the way that the widget gets its information so context which is more information about what's going on around you is basically your widgets way of getting information about itself so let's say for example in terms of us as people let's say that we our friends take us and they say to us okay we want to surprise you we're going to send you somewhere you're not going to know where it is and you're already in a city that's away from home so you don't necessarily really know the area so your friends say to you okay we're gonna get this goober for you we're gonna blindfold you we're gonna put you in the Hoover you're gonna go somewhere we're not telling you where you get to the town get added over you take the blindfold off you don't know where you are context in that situation might be well where did I come from where is what like what other towns are around me what's in this town what can I do in this town that might either give me an idea of where I am or just kind of something to go off of so I can at least plan my next steps that's exactly what build context is it's providing your widget a means to get more information such that it can determine its next steps depending on the you know what you're doing in it right I also want to note that this is for vertical location not horizontal locations if you imagine a tree I don't have a picture would you let me see if I can find one so if we imagine this tree here right we have our main app the or the container maybe that's within the one single widget like on a page or something like that and then we have a row we have some columns we have a container text so build context is giving us information about the the vertical location not horizontal so this text right here right I can't click on that but this text right here on the bottom left isn't able to know that context won't give it information about this text over here on the far right but what it will do is it will look and say oh your parent is this container and its parent is this column and then row and in container so on and so forth however long that goes so you can get information about the vertical location of a widget in the tree just not horizontal so it's kind of important to note as simple as that sounds I promise it's actually that simple there's really not much else to build context it's essentially just where am I and that's it it's just a way to get information kind of the way that I've seen it is that it's really just an argument that you're gonna pass into a method that just gives that method its information that it's looking for for whatever it's doing behind the scenes within a flutter so I'll give you an example and this is actually the common gotcha that I want to talk about so let's say in this first in this first example I have two of them and this first one here we have a scaffold and then we have a container followed by a button whoops followed by I'm gonna do that hold on followed by a button and then when you hit that button basically what happens is you get this this snack bar that kind of pops up right and I'm also going to show you all this working correctly so so what happens is that the the context here in this build method that we're passing in is the context of preferences screen state or I guess also a preferences screen perhaps however the context of what the build method returns so in this case but new scaffold widget is not the same which can be kind of confusing because what happens then is that if you try to call something for example down here when we have this floating action button we have this on pressed event handler and we're saying when it's pressed show this scaffold or look at the like we want to show a snack bar when it's pressed and so we're basically saying look at the scaffold of this particular widget so the context so look at where we are right now and then find the scaffold that belongs to us and then based on that show the snack bar but the problem is that this this scaffold that it's looking for is going to go up to our preference and preferences screen state or preferences screen context and it's gonna look for this scaffold in there but that doesn't have any scaffold in this particular example what has this scaffold is this scaffold right here what's returned by the build method right in which case we get an error however there is a solution to this and that solution whoops that solution is that we use what's called a builder function or a builder widget sorry not function we use the Builder widget which is something that honestly up until now I didn't really pay much attention to but now I see it's real vamper I don't know if this is its real value but I see a lot of value in it which is basically the ability to change the context that you're referring to for a given widget or something like that so now what we have is that in this build up here in our preference preferences screen states build method this don't context that we're still passing in it's still the context of preferences screen however what we're doing down here is with using the builder method we're basically saying whatever the context is currently within our our widget forget about it for right here forget about it and instead build this new widget with a different context so in reality what's happening and now we can go to the code also by the way side note I'm trying a new style where I already have the code written so let me know down in the comments below now what do you guys think of this new style is the code already written better for you guys or do you want me to type it out as I'm going also while you're down there leaving that comment be sure to hit the like button it really helps out the channel ok so essentially what we can do and we can go over to my preferences screen right here you can see that we have our little float button right there essentially what we can do is we can actually rename this context then we can say preferences whoops preferences screen does that work no it doesn't work does that work yeah ok I have to have a lowercase preferences screen context so that we can more clearly see what we're referring to here and we can also do the same here because that's essentially what's going on we'll save that it's updated here and watch what happens if I hit this button well actually watch what we get I'm gonna hit this button right now and we get an error the error says the cup whoops the context used was preferences screen so it's not even telling us about this it's just telling us what the context belongs to the context of what and that's exactly what we were expecting the context that's passed into the build method is the context of the widget calling it not of what the build method is returning and that is the most common gotcha that's hard for people I don't know if it's hard for people to get but there's a little confusing for me and it's in my opinion not the most obvious thing in the world now let's try something else let's come down here you will actually just delete this because we don't really need it and we can bring this up this is the second version of what we're doing right now will change this year we'll hit save clear that and this should be good this context here now still if we have to say whoops we still have to say what it is which is the Preferences screen context perfect however we aren't going to copy it and paid just copied it but we're not going to paste it somewhere else down here where we had it before we don't have to do that because now what's happening and maybe this is a little bit easier to read now what's happening is that we're using our builder of func or a builder widget to essentially reassign the context or to assign a different context to this floating action button so here what's happening is that this should be called let's say build or return it would return context maybe build returned context ok we'll copy that we'll paste that here and now let's see if we get a different outcome when I hit this button it still doesn't work alright so we've changed all these things the next thing that we have to do is because we had that error we have to restart the state kind of like a hard restart so I'll sign back in we'll hit that we go over back to our preferences page and when we hit this button now everything works and it properly comes up and the reason is exactly what I was demonstrating here which is that we're now using a different context which we can see here from renaming the names to actually see the different contexts that we're using more clearly instead of calling everything context so that allows us to do things such as this scaffold of thing which is essentially I believe an inherited widget which is basically saying hey find me the scaffold of myself so it's going to look up the tree find the scaffold of where you are right now the scaffold that in the tree or that is controlling you I guess I should say and then it will go and act upon it right it will use that in whatever it's doing and if you've ever used themed of so if you've ever said I believe I have do I not I'll make a new video on that then I believe so if you you can set like a theme in your in your app dark page or app that dark file which is the you know the main file and then you can basically use that theme of things so that you can essentially use those colors or whatever it is that you're setting your theme you can use them everywhere throughout your application instead of having to go and you know get the hex values or whatever it is and do that kind of conversion like you'd normally have to do with colors for flutter so that's kind of hopefully that made sense that's that's basically how build context works it's actually doing a lot for you like it's doing a ton of work for you but in terms of actually using it it's pretty simple and in terms of knowing how it works it's probably even simpler alright guys thank you so much for watching this video I really hope that you enjoyed if you did leave a like down below and also tell me in the comments did you like the video or not or if you have another idea or suggestion for a video let me know down below also if this topic isn't really making sense do you still again let me know down below and I'll try and explain it a little bit better so anyway thanks for watching and I'll see you all in the next one take care peace

Channel: Coding with Glove

Views: 31,591

Keywords: Garrett Love, full stack, front end, back end, how to code, how to build a website, html, css, javascript, React, Node JS, engineer, Learn to code, Flutter, React Native, Mobile apps, Entrepreneurship, Entrepreneur, what is buildcontext, dart

Id: MFNe7hdOCVs

Length: 12min 26sec (746 seconds)

Published: Sat Jan 11 2020