How to Fetch Data from Cloud Firestore in Flutter [2023]

today we are going to learn how to fetch data from file store as in the previous tutorial we learn how to store data in the file store so in today's tutorial let's quickly have a look what we are going to achieve okay so our application is running let's click on sign up so first we are going to enter the details which is the previous tutorial in which we learn how to store data inside the Firebase but today we were first going to store this data and then we are going to try to fetch this data so you've added all the details what this is going to do this is going to send an email and first perform the email verification or you can say the email authentication which we have already created and we have also learned how to set up our phone number authentication which we already seen in the previous tutorial so let's click on sign up and you can see your account has been created and we are successfully redirected towards our dashboard so now when we are going to click on this icon at the top and inside let's click on this edit profile it's loading and you can see it has fetched the records save records that entered by the users so this is the one type of data that we are going to fetch for the specific user who is logged in and the second type is when we are going to click on this user management let's say this is the all record of all the users we have currently inside our database so in today's tutorial we are also going to learn how to fetch the single record using some weird clause and also we are going to learn how we can easily fetch the logged in or authenticated user's email and also how we are going to file the list of details and how we can display them right so this is what we're going to achieve today if you are following the series you already know that we are creating a flutter login application as you already know the design portion is already completed if you are new you can watch the previous videos linkage in the description again if you are new you don't need to be worried because this video is not directly linked with any of the previous video and on the right side you can see we are creating the back end whereas in the previous video we have completed our store data in file store and today we are going to retrieve that data so without wasting time let's get started everyone in the studio and we are inside our main.dart which is the project we have created for flutter login application as in the previous video we have created a user model in which we used dot to Json object and also we used to store all the data entered by the user inside this user model and then pass this data by converting dot to Json function to our database so this is the user repository that we have created for store instance again if you are new here please I suggest you to watch the previous video linkage in the description or also you can get the playlist link from the right top corner and we use this create user function but today let's get started with a user model step one you can see is to create a model that is going to map or convert the data given by the firestore because firestore provides us data inside document snapshots so we have to convert that document snapshot to our user model so we can easily use it in our application okay before going to create another Constructor basically Dart provides us to create multiple Constructors but we have to use Factory object at the start and then with the dot we can create multiple construct Constructors with different names so let's have a look we will name it same the class name is a user model so as you can see the Constructor which is the default Constructor is created so now we are going to create different Constructor and I am going to name it dot from snapshot or you can call it from document snapshot and that's it this would have to return user model with all the values filled and you can see error is gone let's set comma Ctrl alt L and inside this from document snapshot we are going to receive something which is definitely a document snapshot which will be of type map of string and dynamic and name of document snapshot will be let's say document when this Constructor will be called we will receive document snapshot inside this variable over here so from this variable let's get we can easily fetch the data let's say final data is equal to document dot data so all the data is inside this dot data object and also we can use dot get there's a bit of difference between data and dot get dot get is just going to provide us a typical value of some let's say email password phone number but your data is going to provide us a complete object so that's why we're going to use dot data if it's null we are also going to add exclamation and then inside this email over here that first we need to get an ID so we can get the ID using data not data using document dot ID because ID is the only thing which is directly inside this document but rest of all the videos are inside the data object data and then we have to pass the key names being stored inside the firestore let me just show you we are inside this users collection and inside you can see we have these fields which is email full name password and phone number so these should be same either small or Capital but these should be exactly same when we are writing over here because these are you can say the columns from where we can fetch the data right once the data has been mapped now we will head towards our user repository and will query the Firebase in here as a step two there are two scenarios while fetching the data there might be a need of to fetch a single record or there might be a need-off to fetch all the records let's say all the users or details of the user so first let's try to see how we can get the details okay let's create a final variable snapshot data is equal to we have to add an await sign for all the cloud queries database dot we have to go to collections and inside the collections this name also uses should be same as in the database otherwise it's not going to return anything so inside the collection we want to get specific records so we will query using where object or where Clause again this name is the email name inside the documents list like over here so it's going to point towards this user which is the collection and then dot wear is going to point all the documents contain email class right so inside email comma we have multiple objects right like we have is equal to email that we will get from the user dot get so this is going to return us some value okay once we have data inside our snapshot we have to map this data to convert it from document snapshot to to list or to single records so so we are calling user data is equal to snapshot dot documents dot map and now in here we have to call our model which is user model Dot from snapshot and inside the snapshot as a document snapshot value you have to pass e and then over here we have to Define that we need a single value or we need two lists so as in here in our case we are going to get a single record so I am going to call it dot single so it's going to return as a single value and we just have to return the first user data and that's it this function is for the single record so let's copy it paste it one more time and let's say we want to will fetch all the record inside some collection we don't need any email so what we're going to we are going to write collections of users and where Pro will be removed dot get is going to return us all the documents inside this collection and again we are going to use this documents map to map all the values but in here it will be to list because all the values will be because there might be one value or there might be hundreds of users so we have to again replace this future list return type with a list of user models so there will be multiple users that's why we have to return list okay now we have created two functions so to use this function we have to call it from wherever we want to get the record in our case inside the features inside the core previously we have designed the profile section so let's say update profile section is going to display all the records so inside the controllers I'm going to create a profile controller which extends by the getex controller and it has a simple instance in here you can see the step three is the first one is to create model then we have to query the database and fetch the data convert it using the model object to user model now once the data has been arrived and converted we have to use the data okay the function has been created but over here the question is that how we are going to get the email of the user to fetch all the record from here right so there are two possibilities let's say we already have a list of users so when we are going to click on the list inside this user model ID we have the document ID we can easily get that record from this ID right but in this case we don't have list of users but we want to show the user who is currently logged in using Firebase authentication and you might want to update his record or want to show the data in some screen so for that if you head over the repositories inside the authentication repository you can see we already have Firebase user created for the authentication which is in the on ready which is seeing that if there is any change inside the user user is going to click on the logout if user's session is going to be expired if user is currently login or log out based on that it's going to call this ever function pass the Firebase user and set the initial screen so we are switching the screen to either welcome screen or dashboard screen based on if the user is logged in or logged out so using the same Firebase user we're going to get the Firebase email and also over here inside the authentications you can see we have two authentication providers phone number and email you can see the same same email is inside our documents and also the same email is inside our authentication this means that this email is already authenticated and the rate of that user is stored inside our database now we can easily using a Firebase authentication object filter record okay in here we have currently pointing towards authentication repository to use the Firebase user using the underscore authentication repository we can easily get inside our function we will first get the email is equal to authentication repository dot Firebase user inside its value we have we have all the values of this Firebase user we can get email uid and we also have display name and phone number over here so if you want to perform phone authentication then you want to allow the user to log in then you should have to use this phone number so in our case we are going to use email so it can be nullable value so add a question mark over here error will be gone now we have an email so we just have to check that if email is not equal to null in here we want to perform our authentication which is the user authentication to fetch the record so press Ctrl D this is not the authentication repository is a user repository called the user repository now in here we can easily write user repository dot get user details and inside the email we can pass the email and that's it now this query is going to get us the details of the user and we can easily return all these details otherwise let's say you want to display an error you just have to write else and inside you can show get dot snack bar with some error okay now the third point is completed this means that we have all the record that we want of the user now we can easily display it on the design so inside our profile update screen which is this one now inside these all the fields we are going to store the currently provided user data so inside this column let's wrap this column with a widget which is a future Builder because we are going to get the value in a future so we we cannot convert it into a normal value so the first argument we have to pass is the Builder the first thing is the context and the second one is a snapshot which is basically is a data and then have a function so so inside we have to return something so first let's say we want to check that if snapshot dot connection state is equals equal to connection state DOT done this means that data is completely fetched in the else this means the data is not fresh we want to display a progress bar so let's return center and inside the center as a child we want to show circular progress indicators you know inside if the state has been completed means the data has been fetched now we want to write another if if snapshot Dot has data then we want to return the complete column we have over here which is this one cut it remove this child paste it over here and add a column so if the data is arrived the connection is completed data is arrived then we want to display our complete data and in the LC state if snapshot dot has error this means that there is some error then we want to display an error snapshot dot error.2 string is going to display an error and the last thing is because we have to return something so let's return and in the else we just want to show that something went wrong because once everything is set up inside the snapshot.data this means the data is arrived let's just minimize it go to the form and as an initial value of the form we want to display the data so we can easily convert our snapshot user model of data let's say user data is equal to snapshot dot data and to map it we just have to write as user model now it's going to pass this data to user model so we can easily use this user model as an initial value user model dot full name and let's assign the same initial value to all the fields okay any other question is that where from where the data is coming because we did not call any query or any object so for that we have to call our controller which is a profile controller so using this controller we are going to call our data inside this future Builder so you just have to pass this feature as controller dot get user data so this is going to execute the function this function will be store the data inside this feature and the rest of the things will work like this so let's try to run the application okay so our application is running let's click on sign up to First register the user and using the same credentials we are going to log in and see the saved record has been fetched or not so let's click on sign up and you can see the message your account has been created and we have successfully redirected towards our dashboard and also in here let's click on the document to see the record has been arrived and also inside the authentication let's refresh and then you can see the email has been verified now let's click on this icon at the top this is the profile and inside the edit profile it's waiting and then you can see the record has been fetched the same record currently we have inside our database so first it was waiting for the record to fetch so this is how we can fetch the record now let's say using the same thing but we are not going to call this get single record of user so this function is get all users which then again an async function it should wait for some time and it's a list of user models but this one is not a list of user models so this is going to return all the users so let me just copy it head back to the design inside the future Builder we just have to call this function which is get all users and just to demonstrate you we are not going to call this column now here near for to show the details of the users was to show all the users I have created uh the same feature Builder just have to wrap with a list of user model if you are facing some errors that error could be that its length is not appearing or something like that so then inside where we are returning a simple column I have converted that column into list style sorry listview.builder to create multiple list Styles shrink wrap is true item count is snapshot.data of length and then in the item Builder this is basically a context and this is a index and then to display the values using the same snapshot you just have to write snapshot.data means this is a specific data of some user but then here comes the index because in here we have multiple users not one so we have to Define that at this index show me the name at the same index show me the phone number and email and then in the next index show me again the phone number email and things like that so that's it for today's tutorial I hope you learned something new if you learn something new please like the video and if you're new to this channel make sure to hit the Subscribe button and once again thank you for watching take care

Channel: Coding With T

Views: 65,252

Keywords: fetch data from firestore flutter, retrieve data from firestore flutter, firestore flutter, firestore flutter 2023, firestore tutorial 2023, how to fetch data from firebase in flutter, fetch data from cloud firestore in flutter, get data from cloud firestore flutter, get user data from firebase flutter, firestore retrieve data flutter, firestore get data flutter, coding with tea, coding with t, read data from firestore flutter, read data firestore, firestore read data flutter

Id: Kn2vOrznAxs

Length: 16min 23sec (983 seconds)

Published: Fri Dec 16 2022