Flutter Firestore CRUD Operations (Create Read Update & Delete)

am alikum and welcome back to coding with t today we're going to learn how to perform user create read update and delete operations using fire store as a back end today's tutorial is going to be very informative and we not just going to focus on create read update and delete data from the fire store but we will also make sure that everything that requires to handle data professionally should be covered in this tutorial this tutorial is also not only focusing on the users who are following our e-commerce application but it is a general tutorial anybody who is not even following the previous videos then follow this and learn how to deal with the back end which is the Firebase fire store so first of all let's quickly have a look what we are going to create okay so our application is running and if user is logged in and because user is logged in you can see the screen which is the home screen only appears if the user is logged in So at the top first thing is you can see the name of the user it's written over here so this is the first thing we need to retrieve from the user data and displayed right over here when you head towards the profile and in here there are two things name and email of the user then also in the next tutorial we will cover how to deal with the Firebase images and store it in the Firebase storage so for today's tutorial let's talk about the data when you click on this edit profile you will see all the list of the user data how we can retrieve and place it over here and also because fire stores charge you on basis of reads and wres so we always have to try to go for the minimum reads and minimum rights whenever we are developing any application so to reduce the number of reads and rights we will also see how we can only fetch user record for the first time when application loads and keep the user record on all the screens to reduce number of reads then when user is going to click on any of the link first of all change the name of the user change it to coding with when I'm going to save this you will also be able to see that in the Firebase console so I have opened the Firebase console and currently you can see the first name and the last name are the old names when I'm going to click on Save and the data of first name and last name change we can see the updated name over here here also if you head towards the home you can see the updated name in the profile as well everywhere we have changed the name also when you go to edit this profile click on close account this is going to delete the user account click on close account is going to show the popup I'm going to click on delete first we have to reauthenticate user because without reauthentication we cannot delete the user so let's add again email and password click on verify it's processing and if user is verified it is going to remove and you can see also the user account has been removed from here from the fire store head towards authentication okay currently because uh we didn't refresh the authentication tab so still we can see the sport email when I'm going to click on reload and you can see it's gone it's no longer inside our authentication this means that user account is successfully created and also when we going to click on the sign in you can see invalid login credentials so this means that we again have to create account to use this user this is what we going to learn today so let's get get started if you are already following you know that we are creating flutter e-commerce application and we have already completed the section 1 2 and three in which we learn how to create project till we designed the complete e-commerce application now in the fourth section which is about to be completed we learn how to perform the authentication how to create authentication repository to redirect user on a relevant screens and in today's tutorial we are definitely going to talk about the user using fir store so let's go for the today's tutorial breakdown first of all we are going to learn exactly what is the class how class can be used as a gex controller and why we going to call a controller as a gex controller and why even we need to use the gex controller instead of a simple class after that we going to talk about the very basics in few minutes uh what is Fire based collection and how it works then we're going to talk about the complete user repository how to create user remove user add update delete everything then we are going to get the user data from the fire store only once and reuse that throughout in our application so that we can avoid reads as much as we can after that we will learn how to update the user data and definitely how to remove the user data so let's get started with today's tutorial open Andro studio and we are inside our project previous tutor we learn how to send a reset password email and also resend email again for the reset password or the forget password so let's close this as you can see over here that while creating any class I extend that class with the gex controller so why even we need the gex controller so let's talk about this let's assume that we don't have any controller currently so let's remove the controller okay so currently we have a simple class with a simple name as for today's tutorial let's name it user class inside this class there can be two things either variables and functions or both or even one class contains variables and functions right to use that class variables and functions wherever we want maybe on a button trigger Maybe we want this variable to be used somewhere else we have to create a new instance of that class right to create a new instance we use the new keyword and we create an instance so what does happen when we create a new instance basically when we are dealing with everything on application on the website at the back end we are dealing with the memory right we are writing something in the memory zeros and ones and we are reading from the memory which is zeros and ones when we create a new instance same thing happens we create a new copy of of the same data and add that into the memory so let's say we have 10 to 20 instances of this class or we have 10 to 20 places we are using this user class inside application this means that we have to create 10 to 20 new instances and definitely it is going to take the space of 10 to 20 instances whenever we are going to call the new instance or whenever it is going to create a new instance in the memory then only we can use the variables and the functions we can do everything without using G X but why even we need to write extend with the gex controller so by extending gex what happens is we are going to allow gex library to add some more functionalities or wrap our class with some more functionalities using gex now after this gex we can create instance instead of creating new name of the class we can simply create get.put and name of the class this is doing the very same thing creating a new instance nothing else but instead of recreating instances again and again whenever we are going to call next time get. find instead of calling get.put which is going to find the already created instance of the user class from the memory and we are going to use that same instance wherever we want to use so by this way definitely we are saving lot of space lot of memory speeding up the process and now the reason to explain everything is very simple that whenever we create a new instance of the class there few default override methods that run the first one is the on ready method second one is the on init method and the same way when we are going to destroy it or remove it from the memory on close and on Destroy maybe B so these are the few functions they are in the cycle of the class so I hope you understand a bit about classes I am creating get. findind over here so what does it's doing if we take a simple class which has a static keyword at the back end or let's say we have this screen redirect function and I'm going to make it static what does this means that now I cannot use anything or any variable from here everything should be inside this function and once this method is static without creating a new stance of this class I'm directly going to call authentication repository do screen redirect and it should work but again the dependency is that we cannot use the variables because variables can only be accessed using the new keyword which is to create a new instance now head back over here at the top you can see it's a static get method a method which is only return something the name of the method is the instance and inside the method you can create cly brackets over here and return get. fine from here but using a single line fat Arrow we are returning get. find which is going to find instance of this authentication repository for us and using the same approach when you head towards the main dot we initialize the Firebase and once the Firebase is initialized we create the first instance using get.put of Authentication reposit whenever that is created in the authentication repository on ready method will automatically be triggered because authentication repository created for the first time and whatever is inside this authentication on ready method will be executed and we end it to the relevant screen so same for the let's go to data go to repositories and inside we have a user repository we created while storing the data inside user record when we created the email and password authentication and also store data Inside the Fire store in that we created only one function that function task is to save the user record open the Firebase console and in here you can see inside the Firebase fire store database the first thing is collection right so database starts from here so we need to call any collection then inside this collection we have list of documents and each document contain list of data we can again create another collection inside this document then again a document then again a collection again a document so this way we can keep extending as much as we can so this is how fir store works and using the same approach we created the fir store instance it is pointing towards our database which is the fir store database and using this variable we call collection name of the collection is users then document is user ID which is this one we retrieve the user ID right from here when we authenticated user and stored user inside our authentication and using this ID we can easily store all the data and retrieve all the data using the user uid so same way we are going to implement all the functions we're going to fetch user details based on user ID function to update user data and rest of all are same we have already talked about all these custom exceptions so if you're new you can watch the previous videos so let me copy this function and replace it for all of them in here again to get the user details I have created a function fetch user details and inside you have to first call the await sign because it's a cloud query so it might take some time so using the DP which is Firebase fir store. instance do all the collection again collection of users because we want to get the data of this user and inside this document we have to tell that which document data we want to retrieve right to retrieve a document of one specific user we have to Define ID of this document because while storing data if you had to order the signup controller after checking everything we first try to authenticate user using register with email and password pass the email and password and we get the user credentials which is the authenticated user and using user. uid we get this uid and store that uid inside the user model and again we have rest of the data of the user and pass this new user to save user record function which is this one which receives the user and again you see user. ID is the document ID while creating this new user so once we set this ID now we need again G that new ID to get the user record so for that we have to again head towards the authentication repository and inside you can see we have Firebase fir store instance already created and using authentication do current user we can get the currently logged in user details instead of again calling Firebase fir store inside every class why not we create a simple getter method I have created a user type when you H over this user you can see this user is the Firebase o do do user so so we need this user with the get method I am just returning authentication which is the Firebase au. instance do current user it is going to return us the current active user using this authentication user so head back over here inside this document now we are going to call our authentication repository do instance so again this instance is already created first time now it is just going to find that instance and using that instance we can easily call our Au user. uid because Au user can be null so add a question mark now it is going to get us the uid and using that uid we can easily be able to call the user and there are two methods to get the data from the fire store the first one is the get method when you over over this it is going to return document snapshot so document snapshot means that because we using this document so that's why it's going to return us a specific document snapshot and when you hold this again you can see it is returning map of string and dynamic because fire always return data into Json format and we also have to store data by converting that data into Json format and in the dart this is called map because first one is key which is always a string and then second one is a value which is dynamic so once we receive this document snapshot first we check that if there is anything in the document snapshot we will convert that document snapshot using user model because we have to map that Json format into the model we are using which is a user model and I have created a function which is from snapshot and pass the Json to this function inside this user model which has list of values we have to first convert while storing into adjacent format so tojson method is going to help us get all these values and map those values using the cly brackets as first value is a string which is a key and then we have the value which is the user model data it is going to convert it into the Json format and we can store that data into the Firebase and using this function which is the from snapshot you can see we receive the document snapshot and we receive the Json which is map so first we are going to check if document data not is equal to null means if there is anything inside this data if there is not we are going to Simply return the user model which has empty method actually we are simply returning all these values with the empty data from here and if there is any data just get that data into this and data of value this is how we can retrieve data from the gon data of first name last name username make sure these all values should be perfectly match with the values when you are storing this if this value and this value is not same this is not going to fetch data so make sure these two should be same and the double question mark means that whenever this value is going to be empty we want to store empty text over here inside the first name instead of null so once created we're going to return this you can see we can return the Future model we can use this whenever we want next the update user details updated user data we again have to use tojson method which is going to convert our new data into Json format and using updated user model we have to call collection of users do document again we have to pass the user ID do update function and pass the updated Json next to update a single field of user we are going to Simply pass the Json directly to this function and it is going to store the adjon and again in the document we have to call same Authentication go to users go to this document and use the update function to pass the Json and also if we want to remove the data we just have to call again the same collection do document pass the document ID which we want to delete because in the document we have a list of data so by deleting this document everything will be deleted so make sure to add pry catch as well so once this authentication repository is completed sorry user reposit is completed let's close this close this data as well go to personalization controller and we we have a user controller over here previously user controller was only handling one function which is going to store user record and what is the main purpose of the user controller is to manage the design as well as the back end so now let's try to fetch the user record when I'm going to open the shop and inside the screens we have a home screen so this is the first screen on which we want to display the user record on the home app bar now inside this app bar whenever this class is going to be created for the first time we want to get the data from the fire store then we want to reuse that data wherever we want so inside this class I'm going to call final controller because controller has to handle everything so controller is equal to get.put means create a new instance so that we can trigger the on init method user controller so now this user controller will be triggered for the first time whenever the home screen appears Now using this controller we can easily replace the sub title which is the dummy data you can see the dummy name over here so we want to replace this text with actual user so first we have to open this controller and we have to call get the user so that we can use it so I'm going to press control o to overwrite write on init method make sure to add super dot on in it and after this call a fetch user record function and create that function over here fetch user record function this is going to fetch the user record and it has a try catch so so first of all we need to create a new variable a user variable which will be assigned a dumy user or user model. Mt for the first time and it has do OBS class and you can see its return type is user model but RX type of user model so what does this means because using gex we can create a user which retains its state and also help us to update the front end whenever needed this OBS means that now this user is going to be observable so someone is going to observe this user and and whenever there is change inside this user it is going to redraw the design for us and work like a set straight method for the straight hold widgets so if there is any change in the user model right over here we want to redraw this on the design so that's why we have to make this OBS and return return type will be RX so now we want to assign this user model actual data whenever this function will be executed for the first time and reuse this user through our application so for that we have to use this user repository inside so let's get this data first call the weight sign and then use user repository. fetch user details this function is going to return the user details of this currently logged in user and to assign this user we have to call this. user and pass the user we have just created so this to user means the user we have at the top RX user and this is the current data of the user so we are going to pass the current user details to this one and once assigned we can easily use this user throughout in our application and in the cat if this is not the case we are going to make sure that this user should be assigned as empty data now once this operation is done let's head towards the home app bar where we want to display the user details using the user controller whenever this is going to be called first time this on init method will be triggered and it is going to fetch the record and pass the record to this user so once this new instance will be created using this controller we can easily replace the subtitle and pass our controller do user dot to get the value of the user which is rx we use do value dot we have to display the first name and also the last name as a combination so instead we going to use the full name attribute which is simply combining the first name and last name and returning the full name to us so we going to use this full name and it is going to display the full name for us so let's run this application always run in the debug mode okay so our application is running and you cannot see the name what is the reason we displayed the name we call the user controller for the first time okay so issue is that currently when you head towards this controller you can see it is using a weight sign and the first time when we calling this user it has the empty data and it displays the empty data with no record of this user right so after a few seconds maybe few millisecond depends on the internet the data arrive using this await call data arrive and now we want to reload the state of the user using this user. OBS so to do that we have to wrap this text with a widget which which is OBX widget which is the Observer itself which is going to observe and change the state of this design it has a function so using this function we have to return a widget so widget is the text widget now whenever this user is going to be changed it is going to redraw automatically by its own so because this user is the type of RX so that's why it is going to detect this user Whenever there is change it is going to redraw this so let me refresh this screen and now you can see the name p now to add a loader in case case uh the value is being feted and you want to display a loader over here in here we can create a new profile loading is equal to false a Boolean variable which is also observable and inside this whenever this function is going to be called we want to start this profile loading value is equal to two so this dot value is going to extract exactly because it's a Boolean type so we going to get this Boolean using this dot value and rest once it's initialized we going to make this boo to false you can also use use finally over here and only call this false once remove it from here so start this and in the finally remove the loader because this is Al observable so now inside this controller we can wrap this text instead of directly displaying the text we can add a check or a if statement so instead of a single function now we can wrap this with a function like this and now we have to return this text so first we going to check if controller do profile loading do value is true if it is is true this means that we have to return a loader which is a t- shimmer loader so if you head towards this class this is a custom class I've created which has a simple Shimmer effect when you go to PO spec to use this you have to import this library and in here you can see it's a shimmer do from colors base color is this one then highlight color is this one then in the child I'm going to create a container with the width and height then a box decoration is going to add filler and definitely border radius so to use this we going to head towards this one and add width and height which is 15 width as 80 it is going to add a nice loader and else if profile loading is completed we simply want to return the text from here you can also add if full name is not null you can display some other message and if it contains something you can display it right over here so let me just rerun this so that we can see the loader okay so our application is running again and you can see data appears but because it's in a blink of second so that's why we cannot actually see the loader but nothing to worry about we'll cover that in upcoming videos that's it for the home app bar now head towards the profile and using the same approach we going to replace this appar also to replace that go to screens inside the settings open the settings or Dart and at the top you can see we have custom widget which is T user profile tile inside this widget we going to do the same approach but instead of creating get output again we can simply call user controller. instance so this instance is going to call the get. find andro return already created instance so using this controller we can replace the title and subtitle so call controller. user. value. full name as a name copy and replace the email as well and change the full name to email that's it we will replace the image in the next tutorial so let's save this and you can see the email is being changed but it's not currently visible so let's try to click on this edit and change all these values from here so this is inside the profile in the profile do do you can see we have the default values in front of name username email and list is keep on going so let's copy the instance again inside this build function we have to create a controller instance and using this controller we can easily replace not the image but let's try to replace the name so I've replaced all these values full name username then we have the ID if you want to display the ID then we have email and phone number cently we don't have mail and sorry gender and date of birth so let's save the code and you can see everything is changed we have a username we have name then we have the user ID then we have email and phone number now we want to update this so whenever we're going to click on this name it should open the new form with the two Fields so whenever this full name is going to be pressed we are going to redirect to the new screen which is the chain name screen which is only containing the two form Fields the first one is heading then in the form it has one text form field for the first name and one text form field for the last name and you can see the controllers and the validator also validator is going to validate the empty text we have already covered in depth tutorial about home handling in the registration screen which you can get from the same playlist link is in the description so to save the time we are not going to go into these details again now first of all let's click on this first name and you can see we have redirected to the next screen with the first name and last name already assigned so when you scroll it bit up inside you can see we have already created a controller text form field first and last text form field both have already assigned the first name and last name how we can do that and inside you can see you created a new controller and created a new instance of this controller using get.put which is update name controller so let's open this we first have to create the two text editing controllers first name and last name for two text Fields then we have a user controller using again user controller. instance we have a user repository for uh update data and then we have a form key for the form and again the same approach whenever this instance will be created on ined method will be triggered and using this on ined method we going to Simply initialize these two text Fields with the data of this user controller. user. first name and last name so this way we can see already assigned data to these two Fields now inside this chain name form whenever this uh buttton save button will be pressed controller do update username will be triggered this function inside the update name controller so the first thing we're going to trigger the loading then we're going to check the internet again these all things are in detail covered in the previous tutorials if you're new you can watch the previous tutorials start any loader check the internet connection perform the form validation if form is validated or not if it is not simply return Then over here we are going to create a Json which we want to update and inside the user repository we're going to call this function which is update single field that we just created created inside our user repository and as this is going to require a Json file so we have to provide inside the user collection inside the user document update this Json so this Json is only going to change the values of this document which we are going to pass so head back to update controller update name controller in here we first have to create a Json a name Json Jon will always be inside the early brackets so first value should again be string it's a first name value of the first name will be extracted from this text form field last name will also be extracted from this text form field and using the user repository. update single field will be called and we are going to pass the Json over here it is going to save the record or update the record once this data is updated we also have to update our user which we created in the user controller user. value. first name will be first name. text last name will be last name. text and this is how we can update the user remove this loader show a success message that data has been updated and then move to the previous screen also in the catch whenever there's exception we going to stop the loading and displaying error message you can also use get. off using get do off you can redirect to the previous screen so now let's try to change the last name to coding with t press on Save it's processing and you can see your name has been updated and also you can see coding with W which means that our name of this user has been updated when you head towards the profile you can also see the coding with also updated over here and in the home you can see coding with is also updated now it's time to learn how to delete the user account on this close Account button to delete the user account we first have to create a function which is going to trigger a popup for the user that when user is going to press on that button a popup should appear that should be a warning popup that deleting this there is no returning back everything will be removed so after that to delete the account using fire Firebase we have to reauthenticate user again this is the requirement of the Firebase for that we have to again create verify email and verify password text editing controllers and also a form key that is going to be reauthenticate form key so if you head towards this widget I have already created this login form which is a reauthenticate user it has a simple form with that key and the first text field for the email second text field for the password and also it has hide password if you don't know what this all about you can watch our login tutorial or the registration tutorial to know in depth about all these things and down below over here the first function that I'm going to create is the delete account warning popup it is going to use Simple a default diog and in the content pedding add some pedding add a title middle title and on the confirmation button we going to Simply call the delete user account we have created right over here it as some Styles and on the cancel button we are simply going to close that popup using Navigator context pop it is going to close that pop up right so when this delete user account will be triggered this function will be called this function again going to start loading and we going to use the authentication repository again because inside that authentication repository we have to get the current user provider so what does provider means if you head towards the authentication inside over here you can see these are the two type of providers right so Facebook email and password phone number authentication Gmail Google whatever it is it will be called as a provider so there can be two or more providers so this means that we have to Loop through all the providers data so I have received the provider over here which is the first provider of this user you can get it using the authentication repository or Firebase au. instance. current user. provider data. map this is going to return the provider id so using this provider id if it is not empty we are going to check if provider is equal to google.com password means if it is is email and password authentication same way for the Facebook you can use facebook.com if it is google.com we going to Simply call authentication again and sign in with Google method that we have already implemented and then we are going to call authenticate do delete account it should be a wait because these are the cloud queries then we have to stop loading and redirect back to login screen else if it is not the case with the Google it is email and password authentication then we are going to stop the loading and open a new form on which user should have to authent reauthenticate itself first and after that we are going to delete the account right so the form we have already created we have already discussed whenever this form will be saved or submitted we are going to call controller. reauthenticate form email and password it is again inside the same user controller next to this delete user account function which is right over here so this function will be triggered it will again start loading check the internet and perform the authentication of the form if everything is validated it will also use the authentication repository and call this function which is reauthenticate with email and password if it is going to authenticated there is no exception this means that user is authenticated now we can delete the user right now we have to see these two functions so first let's talk about the reauthenticate user which is inside this authentication repository we have to pass the email and password at the Top If You Follow the tutorials you know that to use the login with email we also have to pass email and password and we have to call Firebase authentication do instance. signin with email and password same Firebase instance do create user with email and password and just like that we again have to call email off provider. credential pass the email and password and if it is going to return the credential we're going to use Firebase all. current user which is currently logged in do reauthenticate with credentials so we have to pass these credentials and if it is not going to throw any exception this means that the authentication has been completed and once this authentication is completed we are simply going to delete the account which is also inside authentication repository to delete the user account we first have to call user repository. instance because we have to delete two things over here user is authenticated now we can delete the fir store and also the authentication data so first remove user record will be called in the user repository and it is going to Simply call user collection document ID of the current user and then delete if you're going to delete Authentication user first then you will not be able to get this user ID and this record will not be deleted so make sure to delete the fire store record first using the authenticated user ID then delete it after that call the authentication which is again Firebase o. instance so using that Firebase off. instance get the current user all the delete method and it is going to remove the user for us so let's try it again inside the profile do do when this close Account button will be triggered we we have to call our controller. delete account warning popup this is going to open a popup message if user confirm this popup it is going to call the next function which is delete user account and it is going to Simply check that if user is logged in using Google or logged in using password email and password do it accordingly because our user is using email and password so it's a requirement we first have to reauthenticate user if user re authenticated using this form it will be automatically deleted everything so let's try it let's refresh the code okay our application is running let's head to profile and also let me open the Google console inside you can see we have currently logged in with this email which is Sport at coding witht and also if we see this data so this is the data with the last name updated so let's try to head towards the profile click on close account we can see the popup so when we're going to click on this cancel it is going to remove it but when we are going to click on this delete button you can see it opens re authenticate user because we are logged in using email and password so let's give it email and password click on verify it is processing and you can see the record has been removed from this user so let's head toward over here and also let me refresh this authentication and you can see the sport email is also deleted because this is a very important and crucial part to upload your apps on the Play Store from now onwards you have to make sure that your data of the user should be deleted otherwise Play Store is going to reject your app and you will not be able to upload it so I hope you learn something new that's it for today's tutorial you can get the complete code link is in the description if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified for all the upcoming changes once again thank you for watching take care Allah h

Channel: Coding With T

Views: 7,878

Keywords: flutter firebase crud, flutter firestore crud, flutter firebase firestore crud operations, flutter firebase firestore crud, flutter firebase firestore read data, fetch data from firebase database flutter, fetch data from firebase flutter, update firebase data flutter, crud operation in flutter using firebase, crud in flutter firebase, crud in flutter firebase database, flutter fetch data from firebase, flutter firebase crud example, flutter firebase crud tutorial, coding with t

Id: RtGVKSLZnW0

Length: 35min 49sec (2149 seconds)

Published: Sat Dec 09 2023