Flutter & Firebase App Tutorial #26 - Updating User Data

Key Takeaways

or rather my friends so we have our form looking pretty good now and we can enter in the name and how many sugars and alter the strength if we want to and we can update but then when we click update the only thing that happens at the minute is we print those values that we're currently tracking in the form to the console now I'd like to actually do something with those values like save them to the fire store use a document so whoever's logged in take those values and update their document in fire store with those values that makes sense right so to do that we can use a method we've already created in the past inside the database service class and that's this method right here update user data so this method takes in three parameters the sugars the name and the strength and then it performs this action right here it grabs the document with this UID and this UID is going to be determined by the user who's logged in their ID so we make sure we grab their document then we use the set data method to set the data of that document using these three parameters so all we really need to do is call this method down inside this function right here so there's one problem with this and I'll show you that now I'm going to open up the debug console and this error by the way we will sort out in a minute I'll show you that in a second in fact let's just do it now I want to go to the brew list component right here and you see where we're getting the list of brews well if those brews aren't loaded yet then we're trying to output and cycle through those same brews length and then performing this function for each one well if they don't exist at the very start then that's not going to work and that's what's causing this error so what I'm going to do is provide a fallback option which is just going to be an empty array save it and we're gonna get rid of that error if we refresh now hopefully now in the future we won't get that error anyway so let's go back to the settings form and inside here I was going to show you the problem we currently have so let me open up the terminal again and go to the debug console and now if I go to settings and if I press update then notice we actually get all right here and we get null right here now this isn't really what we want and we get this strange thing right here as well now that's because we've not actually edited any of these things over here so remember when we first start and this widget first loads we don't actually assign values to these so when the forum opens the values are not to begin with and if we don't edit anything then it means when we update it if we save these values then we're going to be saving null values to the database so we don't want to do that we want to make sure that they have a value and if they don't have a value what we'll do is provide a fallback value so we'll save that to the database instead now what is that fallback value going to be well we want it to be the current value that we've pre populate these things with so whatever's in their user record at the minute and we can grab that from this thing right here so this can be the fallback option user data at our strengths got name and sugars so before we actually save anything let's do a little bit of form validation because we do have a validator on one of these fields up here we can see is it this one yep this validator right here to make sure a name has been entered so it can be blank when we go to update it so let's perform a little bit of validation first we've seen how to do this in the past we can take the farm key that we created then say dots current state to get the current state of the form and then use the method validate to do this so if it's valid it's gonna evaluate this to true and then we can do this saved to the database think so we need to await this because it's going to take some time to do and we need a database service instance and in there we want to pass in a UID which is going to be equal to the user dot UID remember we have access to that because we grabbed it up here using the provider in a previous tutorial where is it there it is final user equals provider of user and that's coming from the user stream remember we set up in one of the earlier lessons and now down here we can access that user UID and pass it into this database service so now we're creating an instant of that database service with that UID and we can use the method update data or user data rather now we need to pass in these three values right here sugars name and strength now remember we need to provide a value if it exists that's these values right here that we use to track the input values and if they don't exist provide the four bucks so the first one I've deleted all the hooks I'll have to go back to the database to find out what the first one is sugars name and strength so it sugars first and we can pass in that by saying current Sugar's question mark question mark because if this doesn't exist we need to provide a fallback option and that's going to be user data sugars so whatever the current value is if we don't change it the next one is name so let's say current name and by the way I don't know whether I've mentioned this is called a null aware operator and what it does is check if the first value has a value and if it doesn't if it's null then it provides this value instead okay so we're going to do the same thing here and if it doesn't exist we'll say use a data dot name and the final strength so user data oops not user data current strength and if it doesn't exist then user data dot strength all right so now we've saved this to the database we've updated their user record and the only thing to do after this is to then shut this thing because it's not gonna shut the bottom sheet automatically now to do that all we have to do is say navigator dot pop context and that is going to shut the bot mashite for us so we're waiting until this is done first of all then we're shutting this bottom sheet so let me save this now and try this out I'm going to refresh over here and then I'm going to go to settings and this opens I'm gonna change my name so I'll change it to Shawn and then I'll go to the next four field is going to be two sugars and then I'll change the strength to something in the middle I'm going to update this now and notice it updates here in real time that is freaking awesome so what it's done here is it's sent this data to the database so that firestore collection peruse it's found the record with this ID and it's updated those values now remember we have an active stream inside this thing over here brew list is it this one no it's the home so right here you see we have this stream provider database service dots Bruce so we have that extreme setup with that collection and when anything changes inside that collection we get notified right and it sends a value back to our app now what we do is we turn that snapshot value back into a list of brews so we have a new list of brews now when something changes and that list of brews reflects what's currently in the firestore collection which is that newly updated brew as well so then what we do is we recycle through those and we start to output the brew list again using that new list of brews with the updated data so now this is kind of all working together really well so what I could do is log out and then I'm going to log in again as toad this time at the net ninja code at UK that was the other account I created before and test one two three four sign-in and once you've signed in I'm going to go to settings and that's this crew member at the top now I'm going to change my name to toad so toad like so and then I'm gonna move my sugars to four he liked it sweet and it's gonna be a black coffee update this and now we can see at the top toad takes four sugars and this color and by the way the good thing is now if I want to update them again in the future I can do so and they're pre-populated with these values now even if I log out and then log back in so toad that's the net ninja code at UK test 1 2 3 4 I'm going to sign in and because we did all of that stuff before with the user data let me go to the settings form and show you this remember what we did is we did this dream builder over here if I can find it where is it ok yet this string builder right here so we were listening for user data when a user logs in and we're getting their record so because we get their record and we have the data on that record such as their name where we output it right here or their Sugar's where we output it right here or their strength we can access all that inside the form now so that it pre-populates it with those values so that's really good isn't it and let me just make sure this works by changing it again and moving something down here updates and yet it updates in real time so we're about 95% of the way there now I want to do one more thing and that is to add a background image to this page and also add images over here for the coffee cup