Flutter & Firebase App Tutorial #15 - Loading Widget

Key Takeaways

I rather my friends so in this video I'd like to create some kind of loading widget that is going to show every time we're doing something in the app that takes time to get some kind of response for example when we sign up or register we click that button we have to communicate with firebase in order to get a response now that takes maybe a second naughty or something like that and in that time I want to show the user that we're actually doing something we're loading so we're gonna have a loading widget that shows some kind of spinner and to create that spin and we're going to be using a package for flutter called flutter spin kit now to read about this just scroll down and by the way I will leave this link down below but you can scroll down and we can see all of the different types of spinners that we can use so we're going to use one of these on some kind of brown background to show the user while stuff is loading now the first thing we need to do is add this to our pub spec file so you need to copy that right here and then we want to take that and we want to put it into our pups back dot Yama file right here I've already done that below provider so press save when you've done that or ctrl s and V s code is going to go out and get a package for you so now we can create this loading widget using that package so what I'm going to do is create this loading widget inside the shared folder because after all this widget is going to be shared between different widgets inside our application it's going to be on this sign-in form also on the register form and maybe in other areas in the future as well so let's create a loading dart file inside the shared folder and what I'm going to do here is I'm just going to paste in this code from my guilt repo I'm gonna walk through it I just didn't see the point in wasting your time me writing out this from scratch so I have imported material at the top and also flutter spin kit right here now I've created this stateless widget with a name of loading and inside the build method all I've done is create a container and this has a color of brown this color property is the background color of containers and then we have a child property with a center widget so that the loader is going to be in the center of the screen and inside that we have a child property and this is the spinner so I said spin kit chasing dots but you could use one of the other different spinners if you wanted to remember we saw quite a few on the documentation for them and in here we have two properties to set the color of the spinner and also the size 50 pixels so I said brown and 50 so that is all there is to it just a simple spinner in a container centralized and now what we can do is import this widget into other widgets when we need to use it so what I'm going to do is open up again the sign-in page so inside screen let's go to authenticate and then sign in and the first thing I want to do is at the top create a bit of state and it's going to be a boolean and I'm going to call this loading and I'm going to set it equal to false at first now the way I'd like to do this is whenever loading is true instead of showing all of this stuff down here in the scaffold I'm gonna show the loading widget now by default it's gonna be false to begin with so we won't show the loading widget but if this ever becomes true then we'll show the loading widget instead okay now how do we set this to be true and when do we want to set it to true well if you think about it we want to set this equal to true whenever we click on the button so if we scroll down here to the bottom this is where we click on the button now what we want to do is set it to be true after this validate right here because we don't want to show the loading screen if we're just doing a bit of validation in flutter where it shows those errors if it's valid and we're making that request to firebase at that point we want to show the loading screen so let's change the loading property to be true here so I'll say set state and then inside this we take another function and this function inside is going to say loading is equal to true okay so that's all we're doing we're setting the loading flag to be true now at what point do we want to set it back to false well if an error comes back from firebase we want to show the form again because they have to re-enter their grid or something like that so at that point we no longer want to show the loading widget instead we want to show the farm again so if we get nope after the response comes back at this point we can set the state again so that loading is then equal to false so we already have set state here let's bring this down onto a separate line like so and down here and inside here we can now set the state of the loading property as well and set that equal to false again okay so once we have a response if it's null and we want to show the farm again we then set loading to false so now we're switching the value of this loading property from true to false and back again now at the meaning if we save this and try out nothing's going to happen because although we're changing the value of this we're not actually doing anything else thereafter so what we want to do now is figure out a way to show the loading screen instead of all of this scaffold stuff and everything inside it if loading is true and we can do that by using a ternary operator so I'm going to say return then loading to evaluate loading so this is either going to be true or false and if it's true then we want to return the loading widget so we'll say loading like so and it's going to auto import that for me up here we can see loading and then we do a colon and then the other widget we want to return if this is false so that makes sense if loading is true it means something is loading in the background and we want to show the loading widget is loading is false it means nothing is loading and we want to show the scaffold widget and everything else inside it the form so let's save this now and try it out so I'm going to enter in an email so let me just enter in any old rubbish first of all and then a password and try to sign in now we should see the loading widget until we get a response back and at that point because we got a response back and it was null and we want to show the form again at that point remember we set loading to be false again and when loading is false we not showing the loading widget we're showing the scaffold widget make sense okay so let's try properly signing in I'm gonna say Mario at the net ninja Cody at UK and the password was test one two three four sign in we see the loading screen and then we see the home screen because we got that user back and it redirects us to the home screen okay so that's cool that's the sign-in page done we need to do a similar thing now for the register page so let me cross this off and open up the file tree and open up register so the first thing we need to do is create a boolean again so let's say bool and loading and set it equal to false to begin with again we need a way to change this to true when a user makes a request to register so down here again inside this unpressed function after the validate check we're gonna set the state so set state and inside there we need a function and inside the function we're going to say loading is equal to true and then down here again after we get a result of null we want to turn loading back to false so we see the farm again so let me get rid of this arrow and open up my curly braces instead and down here let me add my curly brace at the end and we also want to change the loading property to be equal to false again so we do show that form so let me save this I'm going to log out now and in fact I'm going to refresh up here then I'm going to go to the register screen this time I'm gonna try and enter in any old rubbish to begin with and register we should see the loading screen oops it says please supply a valid email so let's now say Sean at the net ninja code at UK and I'm just gonna say test one two three four again so we can remember it test one two three four register we should see the loading screen okay it was infinitesimal so we didn't really see it at all because it was so quick but we should have seen the loading screen if it was true and in fact no we shouldn't have done because I've stupidly not added the loading screen over here we just still returned the scaffold so schoolboy error I need to now check loading here so my mistake we're going to evaluate loading then return either the loading widget so loading if it was true and then if not return the scaffold so let me try that process again log out and this time let me try a load of gobbledygook first of all and try to sign in we get the loading screen then we get could not sign in with those credentials let's go to the register and register a new user so I'll say Luigi at the net ninja code at UK and password test one two three four register we should see the loading screen then the home page voila awesome so this is all working now we've created a loading widget using flutter spin kit and we've used that loading widget in both of these forms the sign-in and the register and it's only showing whenever loading is set to true and we set it to true when we click on those buttons we set it back to false again if we get some kind of response with an error okay so there we go we've done the loading we've finished our signup and also our signing forms the next thing to do is start to show the data on this screen and to do that we're going to have to talk about fire store and set up a database so we'll do that in the next video