Flutter Tutorial - Builder & BuildContext - Everyone should understand this - Deep Dive

the builder widget helps to get control over your build contacts so if a widget wants to access the context of its parent then the builder is needed so i will show you exactly what i mean so i have here a raised button and nothing more and inside of this race button we have an unpressed handler and we can call here for example scaffold of context and there is later where the builder comes in so we create our snack bar for example and then we show here a text with hello world if you try it right now out and click here on this button you get an exception and then we get here this arrow that the context which we have put into our scaffold off does not contain a scaffold so let's look at our app from a different perspective so this is our widget tree of our app so we have a material app a main page and then comes our scaffold and erase button and here inside of our race button we call scaffold of context and what we access here is the context of our main page because if you look here this main page has a context and this context is going here inside into our scaffold and now we need to know what the build context is about so the build context is always trying to answer the question where am i as a widget in the whole widget tree located or in other words what's going around me where am i located right now in the app so basically the contacts can only get the information of its parent widgets and not of its child widgets and we access here this context of the main page and it can only access here this material app and it cannot access the scaffold because this is a child widget and also the build context gets only the information about its parent widgets vertically in the widget tree and not horizontally of other widgets so basically it can only look up the mature app and if there would be another widget on top it can also look this one up however it cannot go here into another widget and look this information up only everything which is on top of this in the widget tree and the problem about scaffold of context is that we access here exactly this main page context and this doesn't know where the scaffold is because the scaffold is below and it only knows the information on top of this so it only knows the information about material app and not scaffold and what we can do to solve this issue is to put a builder between our scaffold and our race button which has here this functionality of calling the scaffold of context and this builder has his own context which he gives to this widget here down and now we access here scaffold of this context and with this build context we can then look up the widget tree so we go here up in the widget tree and look if this one is a scaffold and the first scaffold will then be returned and then we can access this information here so to get practical again we simply wrap our race button here into a builder and this builder gives us here this context and then this context is going inside of our scaffold off and now we can get access to our scaffold which is here up in the widget tree and now if i try to press here on this button again then he gets here the right scaffold and he also shows this message here no error anymore and this concept of builder and build contacts applies also to other widgets so we can also use here for example the navigator of context then we also need always to make sure that we get here the right context also media query of context then we also need to make sure that we put here the right context inside and another solution instead of using this builder is to use a different widget so we can remove this builder and we also can remove this race button and now we create here a new widget and we import it and here inside of this build method we simply paste here this code inside which we have extracted before and this example works also and let's first of all look at an example why this works here you see we have not a builder anymore we have a new widget and a new widget also has his own build contacts which it gives further to its child widget to the race button and then if we call here scaffold of context we access here the build context of this new widget and then the scaffold of context with this new build context looks up at the tree again and it sees okay here we have the first scaffold and it returns then the scaffold and then we can show exactly again the snag bar so like you can see this new widget has here this context and this is going here inside it is also important to know that every widget has its own contacts because every widget has basically a build method so this race button has also built basset and has therefore a context the scaffold also has its own context because it has also built method so basically you can think here that here is for example scaffold and this one has also a build method and it also has its own context and we also can look at another example of a build context and builder here for example we have this floating action button and this floating action button literally access the theme of the context and here we have the same thing so it accesses here this context of the main page and now we need to know where the theme is living in our widget tree so basically what is happening is that we have added here a floating action button to our scaffold so it will live here and the scaffold access with this theme of context the context of our main page so this means that this one here is accessing this build context and now we are looking for the theme and now you need to know where this theme is living and the theme is basically living in the material app widget and therefore this is working fine without a builder because we look here up from this context in the tree to the material app and look if the seam is there and the seam is there so it will return everything correctly so if i try this out he will get the right color here the primary color and we don't need to put here also around our floating action button in builder because with this context of the main page he can get excess of the seam which is living in the material app itself so to sum everything up we always have two solutions if we have a problem with the context the first solution is to wrap a builder around this widget which has a problem or another solution is to create a new widget and this new widget has then its own context and can look up the tree also we need to make sure if we look here something up for example the scaffold in this case we need to make sure that this is living on top of our widget or on top of this context from where we are trying to accessing this scaffold widget hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye

Channel: Johannes Milke

Views: 16,324

Keywords: Flutter, Dart

Id: ALmd6jLqUK8

Length: 8min 27sec (507 seconds)

Published: Sat Oct 17 2020

Reddit Comments

[u/JohannesMilke]

Source code: https://github.com/JohannesMilke/builder_example

Follow me on Twitter: https://twitter.com/JohannesMilke

Here is everything you need to know about the BuildContext & the Builder Widget in Flutter.