How to Correctly use Flutter's Future Builder Widget

except everyone good Wednesday morning Garrett here welcome back to another video and this one we're gonna be talking about a widget inside a flutter called the future builder and it's really interesting widget I think it's kind of overlooked I don't know if it's more of an advanced thing but it's probably a little bit overlooked when people are first starting out because when you're working with futures you kind of just think right let me add the future in I'll get my async data and then I'll be on my way but the future builder is pretty special because what it allows us to do is essentially have a widget that can build itself based on the status of that future right and that's really really cool because it kind of takes some of the heavy lifting out of this for us and so we don't have to check the state ourselves it just is gonna do it for us which is pretty awesome so now that we know what it is that begs the overall question well why use it right if it's it is a little bit more to set up and let's say then just having some async function that runs in your in its state and then kind of reacting or having that function or doing something later on the question is well why use this and it's really a simple answer actually it just it allows a really really easy way for our UI to react to the status of data throughout our app it doesn't have to be something going out to the internet and using an API it can just be anything that's asynchronous within our application and in the example that we're gonna see today that I'm gonna show you I have the app that I've been working on sort of just gonna be working inside of that app instead of setting up something new and inside of my app because I store user data when the user authenticates through Facebook I store that user data in a sequel light database within my application or on the device I don't know exactly know how that the relationship what their works but we're gonna be using that sequel light database to basically just say to query that database get the user data and then we can show some stuff on the screen and that is asynchronous because you're kind of waiting for that right it's kind of a separate entity that you're waiting for so let's start walking through some code what we're gonna do is we're gonna have this future we're gonna we're gonna first set up this future builder and it's gonna work everything will be fine but then I'm gonna draw your attention to a problem that will arise if you use it in a certain way and then we're gonna look at the documentation to see actually what is their exact recommendation for using it because from what I've noticed in my own usage as well as looking on the internet it's a little bit different than what other people have been doing the the recommended documentation thing it's kind of confusing it's a little vague and so we're gonna walk through that as well so the first thing we're gonna do here is I have this text thing here and it says preferences unfortunately that's kind of small on the screen but actually I will do in here as well okay perfect so I had now have this and if I say hey I know how easy it is to see but this text on my apps emulator on the simulator here does say hey we're gonna be deleting this and now we're gonna do is create our future builder so we will have a future builder and the future builder takes in two named arguments the first one is the future itself that makes sense and the second one is the Builder we'll come back to that and we're you're gonna have an error for right now this we're gonna have DB provider which is not something you'll be able to access that's something that I have written inside of my app to access my database so don't worry about that but it can be whatever async thing you want so for right now if you have let's say some API that you are using or if you know of an API that you can use or if you have a project that has an API you can use whatever it is try it out with that and see how that works but this basically is going through a database thing that I have that will essentially just get me the user from my database and now inside of this builder this is actually a callback function right here and the callback function takes in two things it takes in the context and it takes in the snapshot and inside there that's gonna cause an error don't worry about that inside there what's going to happen is you don't have to do this but we're gonna have a switch statement just so I can demonstrate that we are going to account for all the different states that this might have and so we're going to be looking at the connect that's not correct the snapshot connection state okay that is also need to spell this correctly that's literally you know exactly what it sounds like what is going on with our future what's the state of it right and this is kind of how we can react to what the state of it is so if you're well you'll see in a sec so here we'll have our first case and this will be connection state dot none okay and we will just return here and say actually do you wanna do that we're gonna return a text widget here and we will say none simple enough now let's add another one in there's gonna be four of them so we'll add in four here this next one will be active and this is actually just gonna be fall through because it's not active I guess is technically technically the same as the next one that we're gonna have which is waiting and there we will say waiting waiting or active or I should say may be active and may be waiting that kind of makes sense and then this last one this is gonna be done and so this is just like it sounds when everything is done you should have the data then and then we also want to if you can see there's some blue squiggly lines here those are telling me that it's supposed to return the type of text and it doesn't and that's because this case there this switch statement all the cases are not like they haven't happened yet they're not the default thing we have to add something that will happen no matter what we do that and now we have this and look at this actually by the way this nut says done okay so technically this is it we've actually now finished here right we have our future builder and and everything works we have our future so it's loading this and it's saying when that's done or build this right it's kind of like its own build method sort of in a way right there's a problem here and I'll demonstrate that problem because what happens if we don't just want text well actually even if we don't just want text something is happening here that we don't want to happen and let me actually just say default here I can demonstrate this by adding a text field and having a controller of text editing controller and then say text and then here I can say that this will be snapshot data first name that's because this is not spelled correctly and now this works this is interesting because if we notice something happens here that we don't want this do you see what's happening I'm clicking into it because I want to type the keyboard starts to come up but then we really really quickly for a split second have that active and maybe waiting thing that comes up what's happening what's going on here the problem is that the build method is being retried and that is one of the biggest issues that people have with the future builder when they're starting to use it because the documentation specifically says at the top I'll bring it over real quick it specifically says this line right here it's actually the first one it's just kind of confusing as to what it means if you're getting started with flutter or even dark like I am myself the future must have been obtained earlier during the state init state did update config or state did change dependencies and which not be created during the state build or stateless widget build method because or in the constructor of future builder if it's create at the same time then basically every time the future builders parent is rebuilt so to Willey asynchronous tasks be restarted so what's happening is that our build method will actually start up here the container is being rebuilt because the build method is being rerun and that means that this is happening every single time our future is being executed every single time and we don't want that obviously that's definitely not what we want and that's why this is happening that's how why we can't type because it's basically rerunning it again and actually one of the triggers for a build method rerunning or for the build method rerunning is the keyboard coming up and I guess the user interacting with the screen to some extent so how do we fix this no problem we have to change this actually though to a stateful widget though and the reason is because we need state because we're now going to use the in its state method to trigger our future so to do that I'm actually going to probably cut ahead in the video so we should be good now don't exchange them we still have this problem here and we weren't going to fix that just then in there but what we will do is we will fix that here what we're gonna do is we're going to create this this new actually this user future we'll call it and this is going to be of type future the next thing we're gonna do is have an innate State thing here an init function we're gonna override that actually yeah we're gonna put it there and then we will also have this get user method right inside here we're going to we're going to return this is going to be async so we'll have returned a weight and then DB provider DB get user you might look that might look familiar and it should because we basically used it right here right and so then we're gonna do is inside of our knit state this is where we're actually going to run this function and so we will have user future equal to get user then that means that this was just executed so this right here is what we have so we actually don't need that right so we're gonna say use your future now if we refresh this will come back into the app will start all over no big deal it loads we come in we go back to our Preferences page and look at what happens I click in here and it doesn't refresh anything it works the way that it should the way that we wanted to and I can even type do whatever I want now this is gonna go back to normal because we don't actually change the data we're always displaying the same thing so you would want to not have this set to that you'd want to have it set to like another copy of that data that you can mutate but in this case that's how you use the Future Builder this is the correct way to use it and the interesting thing here that I want to explain is why does this work why does the other thing not work well there's two things here in my opinion the way that I see it that kind of helped it to click for me number one is the fact that the actual future is being executed here okay that's the actual execution not inside of our future builder if it was inside of our future builder then every time that the building method would run it would so two would run that future instead running inside of an it state and we're just passing it we're passing the result of that future to our future builder the other thing has to do with type and dart is a statically typed language and if you're coming from the JavaScript world this can be a little confusing as it was definitely confusing for me and quite frankly still is in some ways but what's happening here is that we're not actually passing a future we're passing the result of the future but that result is of type future and that's a very key distinction to make the documentation in my opinion doesn't really do a good job of explaining this but essentially what the future builder is supposed to be passed is a piece of data that is of type future and not the future itself there are two different things and if you were to look at this this user future thing it would still be the object of what my case it's an object that I'm getting back but it's not necessarily a type map which would be an object it's a future that eventually you'll have to convert let's say into type map or whatever it is that you're trying to do and that's a very very important thing to understand is the difference between an actual future and a piece of data that is of type future and to me for me at least that was a really big clicking point when I realized that and probably I think that understanding will definitely help when learning future flutter and dart in the future see what I did there okay so thank you so much for watching guys if you enjoyed this video please thumbs up the video it helps out my channel a lot if you'll ever want to know let me know how I did maybe I sucked maybe the video was great I don't know let me know down in the comments below I would love to hear your thoughts and if you want to see more videos like these then definitely hit that subscribe button but also hit the bell button so that you really get a notification every time I come out with new video all right guys thanks so much see the next one take care peace

Channel: Coding with Glove

Views: 34,148

Keywords: Garrett Love, full stack, front end, back end, how to code, how to build a website, python, React Native, engineer, Learn to code, Dart Language, dart, flutter, futurebuilder

Id: LYN46233cws

Length: 14min 42sec (882 seconds)

Published: Wed Nov 20 2019