(CRUD)📱Read & Display Data • Firebase x Flutter Tutorial ♡

yo what up welcome back to another quick flutter tutorial i think we've made some pretty good progress so far on our app but just to sum up what we have so far we've sorted out the basic authentication and we can assign users in and importantly we can also register a new user and also we added this section here where we can get some more user details now if you think about the crud operations which stands for create read update and delete so those are the four basic operations that you're going to need when creating a functioning app so we've addressed the first c in it like creating data such as the first name last name and the age and we can now store this data in our in our database so for this video let's turn our attention to the next letter which is r which stands for reading okay so we want to read the data and just display it back onto our home page so just to keep everyone on the same page like let's just register a new user right now so let's say michael jordan a i don't know how old he is like 50 michael jordan gmail.com and if we create a user here currently it just brings us to this home page which i've got opened up and right now we're just saying okay you're signed in as your user email and we have the option to sign up so in this home page i kind of want to just display the other users as well that's signed up on the app so if i go back to my database we created this collection of users and each user has a different document attached to it so you can see these are the current users that we have signed up and this is the one we made just then so with all of these users let's just display it back in a list and try to grab some information about the user like the username okay and we'll present it nicely in our so essentially we're going to find this collection of users and we're going to go through each document and we're going to grab the first name of each document so let's come back to our code and go to your homepage.dart file and the first thing i'm going to do is to create a list of document ids so let's call this a list of it's just strings let's call it doc ids and then let's create a method for getting these document ids sorry feature let's call it get doc ids awesome so if i say await firebase firestore.instance and get the collection of we called it uses so this will just bring us to this collection here and then let's go through each document and grab these ids so we can now say just get and you can see if you hover over hover over the get method it just says fetch the documents for this query okay and then there's a lot of extra things we can do here so we can say then and then you get this value okay which is just our snapshot so i'm actually going to call this snapshot you can call it whatever you want but i just like the naming to be very intuitive so with these snapshot what you want to do is get the snapshot and you can see here the docs and for each of the documents let's first of all i'm just going to print out what this element is saying okay so let's print out the element and maybe the reference okay cool and then if i just initialize this state let's just run this method when we first open this home page okay so we initialize the state let's just get this method to execute and let's see what happens so if i just show you here you can see this bit of code going through the collection of users and then getting the snapshot for each of the documents you can see what it prints out so the document reference and you can see that this is the document ids so that's for each of the different users and so what i'm going to do with these guys is just to add it into my list of document ids okay so i just want to collect them up so let's go to the element reference and then the id okay so this id will give us this document id and i'm just going to go through each of the documents and just add it so that i have it conveniently in this list of strings cool and just to make this look a little bit more nicer like i said just to do with the naming i don't want to call it element i just want to call it document makes the code a bit more readable awesome so now that we have the list of documents we can come down to under this material button so we have a big column here and at the bottom let's create a list view and just expand to fill up the rest of the space and i'm going to create a list view builder so i created a separate tutorial to dive more in depth about list views if you need so check that out but essentially we can create a list here and let's return a list tile and for the title we can put in a text widget and let's put in the name here and then we have to specify the item count so let's just say three for now okay just to show you what's going on so that's what this lists a few builders doing three of them and we're just returning a text widget that says name okay and in the position of these text widgets i want to give the actual first names of all the users in our app now because this is a future meaning it takes a bit of time to load the information we have to wrap this widget in a future builder okay so i'm just going to grab this list view and we're going to put it in a future builder and so in this builder return the list view and we also have to specify the future so basically this is saying what are you actually waiting for well i'm waiting for this to execute so get the doc id so this is the future builder it's going to wait and get the document ids and once we got the document ids then we can return the list tile okay and also once we've got the document id it'll fill up this list of documents and so instead of just printing an explicit three we can say doc ids.length so just however many documents we have in our list and then the important bit of code is going to be in here okay so let's say doc ids and then the index so if i save this and i run it and then it's displaying all of the documents now looks like that's a double repeating and that's because i was calling it in the initial state before so that's why i was adding double so let's just get rid of that and so in our future builder let's wait for the method to execute so that we get the document ids and then let's return it in our list view builder so you can see these document ids that's these document ids right so we are one step closer now let's go to this inside of each document and try to grab the first name now for this i'm actually going to create a new file so that everything is nice and organized i'm going to create a new folder called read data and inside here let's call it get user name so let's create a state list widget called get user name so what i want to do is i want to call this widget when i've got a document id and from that i just want to get a first name so that means we will require a string of the document id and let's create the constructor for this but require it and then the first thing we're going to need to do is to get the collection so collection reference we're going to call it uses is equal to firebase firestore.instance and the collection is users okay so now we've stored the users into here and instead of returning a container we want to return a future builder and specifically we want to have the document snapshot as the type and so for the builder let's grab this guy and so this snapshot tells us about that information and so what i'm going to do is let's first of all do a quick check and say the snapshot dot connection state so this will help us determine if it's loaded or not and so if the connection state is done meaning it's fully loaded then let's grab the data from the snapshot so the format i want the data to be in is a map and the first bit of information is a string and then after that it can be dynamic and let's just call it data and then grab the snapshot make sure the data is not null and we want to get this data as this type cool so if you're not very familiar with what this is saying the map and the string and the dynamic if you remember from our register page when we're adding a user like this kind of format this is what this is what the map is it's like a string and then this one can be dynamic it could be a string or an integer like this age so this format is what i'm trying to get the data to look like so now that we've got the data from the snapshot let's return something let's return a text widget and let's say the first name and from the data i want to grab the first name cool and then if this doesn't execute let's just return a text widget that says loading awesome so everything is almost set up now so once we get this snapshot of the data let's convert it to a map and then from that data let's collect just the first name and by the way this string should correspond to this string that you're after okay so first name is what i'm trying to get and that's what this is saying awesome now let's give this a go let's see if this works so in our home page coming back to our future builder we're getting the document ids and then right now we're just printing the document ids in a text widget like that and so now let's say get user name and it requires us to give it a document id which we can and let's save this cool so it's loading and it's not actually it's not actually working and that's because i just realized in our future builder we should specify a future so what are you waiting for now in this one it's users and then the document and we have to give it this document id to load that's what we were missing so let's save this and restart and it's loading and then sweet now i got the first names of everything in our database like steve bill michael cristiano sick and so like i said this data that i said first name is what we're fetching from our firebase so if i say like a last name right and just change this to last name it gets all the last names okay and the last one's null because i don't have any information for that guy awesome so that's how we read the data and display it back onto our screen now just before we make this a little bit more pretty i'm just going to do a quick summary of what happened just then so coming back to our home page we created this empty list of document ids and we created this method called get document ids and what we're doing is we're going to our collection of users okay and then we're looking at each of the documents and we're adding it to our list of document ids okay so we have a nice collection of these individual document ids okay so once we've got these let's go to each one of them and just grab the first name so now we have a list of document ids and then we can use the future builder and say once you get the document ids let's create a list and display it here and so initially we were just displaying the document ids and then we created this other method called get username where we can give it our document ids and then this new file once we grab that document id we are converting the data into a map and we're just going to grab the first name or the last name whatever you want and if the connection is not done yet then we're going to return just loading so at the beginning it will say like loading and then once that's done it'll display the appropriate name okay and like i said this here is the important bit i could even say age and it'll just tell us the age of each person so hopefully you followed along just let me know if you have any questions i'm happy to help out but from this point onwards this is just the fun part let's make this a little bit more nicer to look at okay like all this stuff is scrunched up so let's come back to our home page and let's create an app bar here let's display the email of the user that signed in here and then let's sign out button let's create a little icon here that the user can click on to sign out okay so let's just clean this bit up so in the title right now we're displaying this so i'm just going to get rid of this guy and put it in here maybe just get rid of this information make it 16. so there it is that's the user that was signed in as and then the sign out button right now we've got it on this material button here so in the app bar let's go to the actions and there should be an icon for logging out there it is and let's wrap this in a widget called a gesture detector and if i tap this then let's sign out okay and then now we can get rid of this material button cool so this is the user that's signed in and we can click this to sign now so let's sign back in and follow up for these users let's create a nice looking list tile that displays the person's name as well as the age okay so in the get user name i don't want to print that part okay and let's say first name and looking at this list tile let's give it a color tile color sweet and let's also maybe give it some padding maybe just go for gray and so i displayed the first name let's also display the last name and maybe the age as well sweet so there's the first and the last name and let's just add in a space between also there's a gap there and finally let's just add one more for the age let's put a comma after the last name and after the age let's say years old cool like that so steve jobs 77 years old mitch is all there's a lot of nulls because we created this user manually and it doesn't have the other fields so this one i'm just going to actually just delete and there it is awesome so hopefully you followed along so far this is a really important aspect when it comes to app development but just like programming in general you know and just one last thing is if i sign out and i create a new user hopefully that user just pops up in our app as well okay so let's give that a go so let's register a new user let's say brian chesky he's the ceo of airbnb so brian gmail.com and hopefully our new user is shown there he is brian chesky okay and we're signed in as brian so now that we can read and display the data there's a lot of things from here that we can do which is the next letter is you in crud so we did creating the data now we can read the data and next we'll focus on updating the data so maybe we'll have like a settings button the user can click and then they can update the fields of like how old they are maybe their name and things like that so that's the natural next step and also we can think about ways to sort this information right so maybe we could sort them from oldest to youngest or youngest to oldest things like that and this becomes really useful later if you have like a app for example that's got to do with money like let's say these people are tutors and they charge a certain rate then we can have a button to rank them from cheapest to most expensive and vice versa so a lot of cool things we could do here but i'm just going to leave it at that for this video hopefully that was easy to understand let me know if you have any problems but other than that thanks for watching and i'll catch you guys in the next one peace [Music]

Channel: Mitch Koko

Views: 78,493

Keywords:

Id: PBxbWZZTG2Q

Length: 23min 50sec (1430 seconds)

Published: Wed May 04 2022