Flutter Tutorial For Beginners #11 - Flutter Database with Firebase (Part 2)

[Music] so we need now a way to actually update these posts that when we like it we can tell that we've liked this post so let's work on that next uh and then we'll actually work on loading all of these and and you know showing them at the start of our application so let's go back to post and now let's modify a few things um so that we can actually update some stuff when the user likes the post so first thing i'm going to do is i'm just going to say void update like that and then i'll simply call this dot update after we like the post so then it will get all of the likes that we have and it will call this method which will hopefully update it for us so inside of here i'm going to call a method that we're going to create now in database so inside of our database file i'm going to make a method called update post so i'm going to say void update post this will simply take a post and what this will do is it will say post dot underscore id dot update like that and there's a reason i can't reference underscore id okay so let's not do that then instead of doing that let's take a post and let's take a database reference of id so now what we're saying is okay give us the post and give us the reference to the item the database object here and then we'll say id dot and in this case it's just going to be update and we can simply update with post dot to json so this is like really basic super simple what i'm saying is okay let's take a post object let's take the database reference that we already have and then let's simply update it with the post.json now we don't really need to make a method or a separate function inside of database to do this but since i want to keep everything kind of contained i will and that means that now if we go back to post what we need to do inside of here is call that update post so we're going to say update post like that for post we're going to pass this because we're passing the current post and for id we're going to pass this dot underscore id like that so that's all we need to do we're giving the database reference which is right here and then we're going to pass the actual post object itself which is this we will automatically convert that to json from the database thing right here when we're calling.2json and that should update the post for us so let's actually have a look at this if this is working or not so let's refresh and let's open up firebase and let's get the app going at the same time and let's go sign in with google choose my account and now let's just go hello we need to make a new message here you can see that gets added and now when i like this notice that every time i like it this is highlighting in yellow so we have one like on it and now we have this user-liked thing popping up and it gives us the id of the user that liked this now if we have that and i unlike this you can see that that disappears it highlights in red and it goes away so that is kind of how firebase works and that's why i wanted to use this too because it's super simple super intuitive and graphically it's like really easy to look at i make sure you're doing things properly okay so now that's working and all we need to do is actually load these messages at the beginning so that we can see all the messages persistently because obviously i have four messages right now but we aren't seeing them we need them to show up somewhere all right so now let's write the function that's actually going to return all of the messages that are loaded in our database so i'm going to call this one get all messages we're going to make this async like that and then at the bottom here i'm just going to have a return statement for a blank list just because now i'm going to make this a future that's going to take a list of posts like that so essentially what i'm saying is that since this is an asynchronous function we have to wait for the database to be queried we might have to wait for this to actually be finished so we might not immediately get a result when we call this so that's why we wrap the list that we're returning it's going to have a bunch of posts in it with a future next what we're going to do is we're going to say data snapshot and then we're going to say data snapshot is equal to and this is going to be database reference dot child inside of here we want the child to be posts that's what we want to reference and then we're going to say dot once like that so what is the error here we need to put in a weight before this so like that so since this is an asynchronous call as well we will await it which means just wait for this to finish essentially okay so now we have data snapshot what i'm going to do is i'm going to say list post we're going to call this posts equals a blank list and this will be the list that we populate with the post now remember that all of this data here inside of our firebase datastore or whatever you want to call it realtime database is not actually a post object it is simply kind of like a json object it's a it's a map or a dictionary right so we need to now take that and translate this into a proper post object that we can then actually return in the list so first thing we're going to do is just say if and this would be datasnapshot.value does not equal null then what we will do is we will actually grab all of the values that are in this data snapshot convert them into post objects and add them to the list so we're going to say data snapshot dot value because it's not null which means we actually found something there dot 4 each like that and inside of here we're going to make an arrow function we're going to say key comma value and then we will do whatever's inside of this function body so what i'm saying essentially is that since this is a list this value for every single value in the list they're going to have a key and they're going to have a value and then what we will do is we'll use that key in that value to actually translate this into an object and add that to the post list so the first thing i'm going to do is say post post equals i'm going to write this here and we'll fill this in later but i'm going to say create post which is a function we're going to write that will actually create a new post given a value so we'll have a look at these actually we might have a look at these after but essentially what this kind of looks like is you have a key the key is whatever that unique id is so actually let me just go to firebase and i can walk us through it so this right here is the key like this kind of let's zoom in this thing that i'm highlighting is the key and then the value is actually the author and the body so the value will uh will store another key which will be author and another key which will be body and the value of that key will be you know tim and the value of body will be hello so it's kind of like a nested statement thing so when i'm saying value what i'm doing is i'm actually grabbing just the information associated with this key which is actually the data that we want so create post obviously doesn't exist yet so we'll have to make that function but we'll leave that there for now now once we get that post we're going to say post dot set id and i think set id is the name of it uh did we have set id yep set id that's what it is and we're simply going to set the id as the value and the reason for that is because the value is the id right sorry not the value what am i saying that's going to be the key as the key because that key again is this right here which is the id that we want but we need to turn this into a database reference because we don't want to just pass the key if we do that then we're just getting a string we need to turn that into a reference so what we can say is uh database reference dot child so not slash sorry dot child and then we're gonna say posts slash plus key so essentially we want to reference the uh key that is in this post field right this so we'll just concatenate those two strings together okay so then we have that and finally we'll say posts dot add and we'll add post and that's the list that we have up here and then instead of returning a blank list we'll return posts like that so now all we need to do is make this create post function so to do that i'm actually going to put that inside of post i just think it makes sense to put it there and let's simply say post create post let's take one record or one value or whatever you want to call it and then inside of here let's make that post all right so what i'm going to start by doing is i'm going to make a map i'm going to say map string dynamic and we'll just call this attributes like that it's going to be equal to a new map so a new dictionary and you'll see what i'm going to do in here it's going to seem strange but it will make sense in a second so first i'm going to say author and i'm just going to make that a blank string then i'm going to say users liked i'm going to make that a blank string or sorry not a blank string a blank list and then i'm going to say body and i'm going to make that a blank string essentially what i'm going to do is kind of just have a cleaner way of updating the things that i need so we'll say you know author starts up as blank users liked starts off as a blank list and the body starts off as blank and then we're going to look through all of the different key value pairs in this record and if any of them are any of these keys right here then we will update what these values are and then we'll make a new post using them so pretty straightforward we're going to say record dot for each i think for each will work and then we're going to say key comma value arrow function like that and inside of here you'll see why i've made the dictionary now or the map i'm going to say attributes and i'm going to say attributes key equals value so essentially what this is doing and is there a reason why the semicolon expected to find a it's the reason do i have too many of those i don't know why it's expecting to find this uh i'll have a look at that in one second but essentially all of this right is going to have let's go back to the firebase it's going to have like author tim sika body hello so the key will be author the value will be timor sika the qb body the value will be hello so i'll just use that same key which we have right here and set that equal to whatever the value is now i don't know why that was saying we expected to find blank thing okay i guess we can just leave that like that that's fine for now and next what we're going to do is we're going to say post post equals new post and inside of here we're going to say attributes and the first thing that we need to pass i believe is the body and then attributes and then we want the author and then what's the other positional argument that we need here i actually don't think we need any other positional argument so let me just look at post quickly but we're making a new post right so if i go to post which is actually just up here we can see we actually take sorry the body and then the author so let's swap those around uh oh did we do that correctly we did do that correctly so body and author and then what i'll do is i will say if um attributes and we'll say users liked and actually i'm thinking i don't think i need to do what i was going to do i'm actually just going to say that post dot users liked equals set dot from attributes users liked and this is going to have to be new so this might seem kind of confusing but what this is doing is essentially saying okay this is a list right this information we're getting from the database we want that to be a set because we have a set stored here for users liked so let's make a set from this list which just takes this list and just actually makes a set of it and then store that in user select then we can return the post like that okay so that should be the create post method done that should hopefully mean that if we go back to database this should be working uh undefined named post uh post post why is that giving me the wrong name can we do post underscore can i do posts like that okay let's just go var post equals that and then expect an identifier oh sorry guys this needs to be comma okay so for some reason i've added this arrow function here which just really messed things up for me i just need to get rid of that arrow that was here i was like why is this not working but it's because i have that arrow so let's get rid of that and let's add our semicolons and now all of this should actually be working to get all the messages so now all we need to do is actually use this function i know this has been a lot of code and a lot of stuff going on but now we just have to use this and actually load it up so let's now go to my home page and what we're going to do is inside of my home page we're actually going to load all of those posts when we load this up actually i don't know if we're going to put it in here or if we're going to throw it somewhere else we might actually do it inside of post lists let's have a look here okay so i'm actually going to do this inside of my home page so let's go over there and what we need to do is essentially load all of these messages whenever this home page is loaded so what i'm going to do is i'm going to make this function i'm just going to call it update i'm going to say void update messages like that and what this will do is we will call get all posts like that is get all post what i called it i called it get all messages great let's call it get all posts that makes more sense so get all posts and then i'm going to say dot then and what that means is once this is done so once get all posts actually loads then we'll have a function which will take the posts this will go to an arrow function and inside of here we're going to say this dot set state and what we're going to do is set the state and change these posts right here to be equal to the post that we have so we'll say this dot posts equals posts and i think that should actually be all that we need assuming that all that is great okay so i just fixed some of my semicolons and stuff i think that's actually correct and what that does obviously is set the state so it will redraw any of the widgets below it that use any of this so that means we will automatically refresh the messages every single time that we go in here now what i'm going to do as well is i'm going to add another method i'm going to say void and in here i'm going to call this one init state i think we've used this before but this is an override method so i'm going to say at override and then what i'm going to do is go super dot sets no sorry not set state super dot init state like that and inside of here i will call update so update posts like that uh and nope update messages why am i calling this this needs to be update posts and that can be update posts okay so i've just mangled all the names but i changed this from update messages to update posts now i'm calling update post so essentially whenever this page gets loaded we will update and you know we can manually update as well but this just means right when this gets loaded update all those messages and that should be good to go for now so let's actually load this app and see if this is working it's a high likelihood that i've made a few mistakes here because this has been a lot of code that we've been writing but let's take a look at it all right so the app is loaded let's sign in with google choose our account and let's see what we get and there we go all of our posts actually load up immediately so now i can like unlike so let's actually see if i like that and then i go back and i can sign in with google there we go we can see that that is liked and that is exactly what i was going for so let's add one more test essage so we have test essay here now let's just make sure this is working because i'm not super confident sign in again and there we go it is popping up all right so that is i think pretty much all that i wanted to show us so now we have the database set up uh we have authentication working we have messages we have likes we have text input i've shown you guys a ton of stuff and i may be ending the tutorial series here if you guys comment enough and you bombard me i might add some more episodes to this series depending on what you guys want i'm thinking the only thing that would make sense now is to kind of associate comments with each of these posts and make it so when you click into them you can kind of view them more in depth but anyways let me know if you want to see that with that being said i hope you enjoyed this series so if you did leave a like subscribe to the channel and of course i will see you again in another flutter tutorial series or another video on this [Music] channel you