Flutter firebase firestore crud with MVVM and GetX

in this video i am going to teach you how to create thread application using firebase firestore with mbbm architecture and i will use getx for state management so let's start this is the empty project firstly i am going to create the structure of mbvm i have created three folders here one for the model one for view and one for view underscore model we will put all the models here and inside view will put all the view which will interact with the user so inside the view model we will put all the view models where we will write all the logics okay i am going to create one view here so the view will be a student view just copy this and create dart file here and the dart file name will be student view import material dot dot here just take state full widget and the name will be student view okay go to main dot dot and here we need to import this which we have created now okay just import this so you can see it is imported here here i will use safe area [Music] and inside shape area i use scaffold okay i will change it when we will use dynamic data so don't worry firstly now now our next step is to add firebase into our project so go to console.firebase.google.com here okay and just so this is the url console.firebase.google.com and then go to add project enter your project name [Music] press continue here and select your account or you can create another account here and select your country here and accept this and create project just go to manifest file sorry just go to android folder and then open app folder go to build.gradle inside app and in the android go to build.grad gradle open both build.gradle files okay and then here inside min sdk version we need to change it with 23 sdk and here in the target sdk version we need to pass 33 okay and in the compile sdk version we will also have to change with 33 sdk ok and and just copy this application id and go to here and just continue go to android section and just press and fit and here we need to paste this application id okay and here we need to specify app nickname so our app nickname is crud then we will have to enter this register app and download this google services.json file you can see it is downloading now hit on next just copy this class path from here and [Music] and paste here [Music] just copy this google services com.google.gms google services and cut this and remove this and then paste here okay we need to apply this plugin google services plugin here and copy this dependency paste here copy this also and paste here now close these all build.gradle files and then go to percept.yml file and here we need to add some dependencies so add cloud underscore files to so foreign just add this all dependencies and hit on pop dot get pubget so you can see all dependencies have been imported successfully now go to main dot dot file and then here add async remove this cost [Music] use a weight here and write widget flutter binding dot ensure initialize here and then firebase [Music] foreign [Music] so so [Music] so right widget flutter winding dot is your insure initialized and firebase dot initialized app just cut this from here and paste here and write with event okay now i am going to run this application and check this application either it is working or not okay so i am going to attach my device you can see i have attached my device and after running the application we get this error so i have forgotten to add this google services dot json file into our project which we have downloaded okay so [Music] just go to the download folder and copy this google services file and go inside android folder inside app we will have to paste this google services.json file okay and then now now i'm going to run this application do now you can see our application has been [Music] launched no issues are there [Music] so our firebase is added successfully and the student name is the visible screen which is now showing okay so i am going to add one floating button here for student edition so now you can see i have added one plus button here by this button i will open add student form where we will add students and in the student view all the student list of students will be visible so i am going to create one more view here import material dot dot and take stateful widget here go to student view and just copy this return and paste here and remove this floating button [Music] okay so this is the home screen and if i will click this plus icon then we will navigate to the add student so i will use firstly go to main dot dot here and type get material app and here just write get.2 and pass your activity name activity name is a add student so fast here after passing this activity name we can see when we will hit this add button here when we will hit this plus button then we can see the add student page is open okay before this we need to go to here in the firebase project and just press enter sorry next and then press ct continue to console then go to firebase file store firebase file store database and then here create database select start in production mode and press on next and then enable now go to rules section and just change with true false to true and then publish it okay now go to the storage section here here we need to we need also to change rules so false to true and then focus this now all done in firebase now i am going to i think my device is offline so i am going to okay now in the add student i will add fr here just go to model layer and create one dart file create class of student model here here i am taking one id of the student and name okay i'm taking id name email password image of the student okay now i'm going to create the constructor of this all variables so student model and here i'll pass id here we will create factory and then student model dot form json and here i'll pass the type so the type will be dynamic this is coming as a json the data which is which will come as a json from five ways so [Music] [Music] now we will create the map so by which we'll insert the students or update the student okay so up [Music] okay so our model class is ready [Music] [Music] okay our model class is ready and we have recently added a bar here so you can see the title of the title okay in add student now [Music] here i will also add title okay so [Music] oh now i'm going to design this add student form so i am using single child scroll view here and inside single child scroll view i am using column inside column i use all the variables like experience buttons etc okay [Music] [Music] so [Music] this is for the image selection okay when we will press this uh gray circle then [Music] it will open the gallery and select the image and then we upload it on the firebase file store okay firebase file storage now i am going to add one more dependency here before this i am going to align this with center i think some issues are there so and here i will use side box to apply space from above okay so now then here i will take some text fields foreign [Music] uh um so similarly for email password [Music] i will create text print okay [Music] [Music] and here i will take one button so i am going to use containerize button so [Music] [Music] um hmm [Music] so you can see our button is also ready now i am going to use some more padding here and just save this okay now our button is also ready just go to pop.dev website here and search image speaker go to installing section copy this and inside pubset by email file paste here and just import this yes the import package is imported successfully now go to readme file from here and just copy this line paste here import this copy this line gallery gallery line okay here we need to create one method [Music] and the type will be async just paste here okay copy this and paste here now i am going to take one more variable layer and the type will be file and inside the mat method i will use image file equals to file and here we need to pass the path which is selected then use this image dot path so we will get the path selected path which is selected by from gallery okay from gallery and here we need to use set state so we will get the updated data [Music] now i am going to copy this method name and when we will press this gray circle means our gray circle is this container so wrap with equal and on tab we will call this method okay this method to choose the image from gallery just rerun your application so you can see i have restarted my application and then we will hit this gray circle okay then we can choose any image from here okay but the image is not showing here so i'm going to set the condition okay so copy this image file and here i will set condition um okay so i have set the condition when the image file is null then we will show this a dark circle if the image is available means we have chosen the image then we will select that image we will show this image okay so now i am going to choose any image okay now i am going to choose one more image from here so you can see the image is displaying here but it is not looking fine so just add fit box fit dot cover okay so you can see it is showing correctly now [Music] okay now it's working fine now i'm going to add new model class and i'm going to add our data into firebase create dart file create class of student view model and extend with a text controller [Music] i have added one init method because it will call when we launch this application okay so it will run only at the first time like unit state now in the add student i am going to add the controller of all text fields um and here i'll use text editing controller so dog cv lovely for email controller and password controller okay we have added three controllers one for the name one for the email one for the password by the help of these controllers we will pass our data into student view model okay so when we will hit this button then we will pass so here inside inkwell on tap firstly i am going to check either it is null or not so [Music] [Music] if image file means the selected file is not equal to null name email and password will not be null then we will pass all the data to the student view model otherwise if the given data is none then i will show the message [Music] and we can also pass the color color of the text so i am going to [Music] pass text color as white and background color as red now if i hit submit button here and if the text fields are empty then it is showing from validation error okay if all data are available then i am going to pass so here here i've created one method firstly i am going to create the instance of this student view model here so [Music] [Music] and import this student view model here collapse this body copy this and cut this and then here i will use loading overlay here i will use is loading and the child will be which we have removed recently so i have to paste this single child scroll view here and is loading here i'll create one variable one boolean variable and the variable type will be boolean and the value will be false so i am going to use this here student new model dot is loading dot value actually this is for the progress indicator we will dynamically handle by this view model so i am going to use this here now now i am going to pass this all variable into the add student method here okay so pass all parameters here [Music] okay i have passed all the parameters into this method so here [Music] and import this file as dot dot io [Music] now you can see all error has been gone from here now if you have dot html then remove this and this method will be the type of async okay and when we will hit this method then i am going to use is loading as true okay so the progress indicator will progress dialog will so okay when we will hit this button and after addition of data then we will set as false so the progress indicator will be gone now i am going to add this all variable into the firebase [Music] so add this all past variable into the into this model okay for the for image uh firstly we will upload this image into the firebase storage and then we will get the download url and then we will save into the firebase file store database firstly i'm going to upload this image at the button click so [Music] we use upload task to upload the image and here we will write the query firebasefirestore.instance.reference.chat and the chat we will pass the folder name and the image name okay so i'm going to create the unique id here this will not repeat in the future so so this is the unique id here i use so student will be the students will be the folder name and this unique id will be the [Music] user image name and then here we will put the file which is coming from [Music] the add student page so paste here okay now i'll use task snapshot here to get the download you are downloadable url where we have downloaded images so here i will use await and just write upload task this upload task okay and then now we will use one string [Music] snapshot dot reference dot get download url so we will get the url after uploading this image here [Music] now we will check if the download url is not equal to null means if it is not null then we will add the data into the firebase files store and here i am going to use this download url okay this query is for image download and get the url of that image and now i am going to write to save all the data into the firebase file store okay so here [Music] inside collection we will uh we will define the we will define the collection name here so the collection name is student and and the document id will be unique id okay and here i will use set and then we will set this student model okay dot to map [Music] okay that we have created inside student model okay to man [Music] and here i will use then to get the result if it is saved or not if there is any error then it will throw error in catch catcher also here i will use this get dot snag bar to get the message and we will set his loading dot value as false okay here also and here also okay now i'm going to check firstly in the firebase you can see there are no data okay now just press any name here and press on submit button i am going to check my logs firstly we need to add some permissions in the android folder go to android app and then main inside manifest file so add this all permissions and for internet network state and external storage read external storage right external storage and here a read legacy external storage will be true and then you just clear traffic too okay then you can see it is processing run again close this manifest file i am going to add one more time now hit on submit button student addition successfully but we didn't get progress indicator so we will check firstly i am going to check the data is either added or not so you can see one student folder is there and inside student folder we get one image file here and we have successfully uploaded our image now i'm going to check firebase files to database inside this also we get student folder here and inside folder we can see [Music] this all data saved successfully just copy this url and paste here then you can see the image is uploaded successfully also now we need to pass the id of the student here just copy this unique id and paste here actually the loading overlay is not working because we didn't wrap this with obx so just cut this and wrap with 4vx now the loading indicator will work perfectly [Music] [Music] now i'm going to clear the data now you can see i have cleared all the data from the database and then [Music] i am going to add data here [Music] now i am going to press submit button then you can see the progress indicator is showing now the data is added successfully i am going to check this data here so we can see all the data [Music] added successfully [Music] and when the data will add it here then i'm going to clear all the text fields so [Music] cool now you can see all the data cleared successfully here and the data is added successfully okay so add student is working fine now i'm going to show all the data which is saved into our database okay so inside view model inside new model i am going to create one method just copy this and paste here also so [Music] and here we will pass query snapshot now here i am going to use for loop snapshot dot docs we want to catch all the dogs all the data which is inside the dock so here firstly i am going to create one variable layer [Music] and this will be the type of obs observable so we will get the updated data so here dot add and here we will pass the model and we will pass all the variable here wow wow um [Music] so we will add all the data into this list okay which we'll get from this student collection and here i am going to use his loading dot value equals to true if the all student is not equal to null then it will automatically invisible okay so here i pass false [Music] and here we will clear all the list now i am going to run this application sorry before this i am going to student view and here in the place of center i am going to use this view builder sorry before this i am going to call this viewmodel here so final [Music] and now i am going to use this here pass context and index inside item count we will use student viewmodel dot all student list dot length okay this all student list okay now i'm going to return our widget so here i am taking row just copy this and here we use network image inside network image use this and then index dot image and the height will be 50 and the weight will be 50. [Music] so you can see our data is coming here now [Music] now [Music] hmm uh so okay so now it's i think perfect so here [Music] me and we will wrap this container with expanded okay so here so you can see our button is placed at the right corner now just copy this page all student and here paste this and cut this container in student view and [Music] wrap with obx and wrap this container with loading overlay is loading and then here student model dot is loading dot value now run again our application you can see the progress indicator is showing at the first time and then the list is loading now again i am going to add more data press on submit button and then [Music] then we can see one student added successfully and then you can see mayank is also added here okay now i'm going to create the update student form [Music] page now here create dart file here import material dot dot and then take stateful widget here and go to add student view and just copy this all copy this all close this add student and from here paste and go to add student file copy this import and paste here and change with update student and here in student view when we will click on any item means in row then then we will use ontap and here i'm going to use sketch.2 and then pause update student here so when we will hit this any item then we can see we are in update student okay but we want to update the particular student mean selected student data here in the name email password and the image so i'm going to pass the data also just write argument here and then copy this and the index of every item now we will get the index all the data here so here data equals to get dot arguments now i'll take anything state here and then here name controller dot text first to data dot name so you can see the name controller is already added if i select on my young then you can see mayank is showing here okay so similarly for email password wow and for the image file i am going to use yes here we use image decoration image inside image network image and then inside network image we will pass data dot image okay and just save this then you can see our image is showing here [Music] okay now i'm going to choose another so you can see if i selected on a mail and then select on image then we can choose another image also here okay i think everything is okay now i'm going to i'm going to work on update to students so change with update student on button click when we will hit this submit button then we will hit this method update student so go to student view model here sorry just copy this add student method and paste this and change with this update student okay and then now the error has gone from update student page and here similarly we will get the download url and here [Music] change the message and here i'll use update and what we want to update then we can pass here so if you want to pass name [Music] and one more thing we need to pass from this method from update student that data dot id okay and here i'll pass instead of unique id dot to string i'll pass id here [Music] and here i'll pass this id which is coming from update student okay and remove this remove this model from here and remove this also and here i'll pass id [Music] so our image profile image will not repeat again and again okay [Music] [Music] me sorry we need to pass here okay data dot id so you can see the error has gone now i am going to check again [Music] just ctrl shift open any student from here and now i am going to type some data and just hit on submit button and now i'm going to hit the submit button so student updates on one student updated successfully now i'm going to back and then you can see the data is updated and profile image is also updated ok now i am going to update this mayank so you can see the data is updated successfully i'm going back and then you can see my bank at the gmail.com it is also updated successfully so no issues are there now now i am going to work on my delete button okay so the delete button is in student view page so here in the icon then we'll press this icon then we want to delete this particular student so wrap this with equal and then in the on type i am go i am going to call method student view model dot delete student and then here we will pass the id of the student so here just copy this and paste here and then we need to pass id of the student it is showing error because we need to create method here to delete the student and the type will be async okay and here so you can see the error has gone now and now here wait firebase firestore dot instance dot collection and then we need to pass the collection name so the collection name is students and then here will pass document id and the document id is this id which is coming from here okay now this is coming from here when we'll click this cross icon and this will be the type of string dot delete okay now no here pause them and then here [Music] when we will delete this when the student will be deleted then the message will be shown here one deleted delete one student deleted successfully and when if the error occurs then the message will appear here okay so change the message here and then we will hit this button then what we will do wow [Music] when we hit this icon then we'll remove this item okay so here i am going to pass this [Music] um okay and just remove this id from here and here also just copy this student model paste here dot student model dot id and then [Music] i think it is fine okay and then we will remove this item from here and the object will be student model when we will press this icon then we will remove this item okay and now okay just run this now i am going to remove this student so and here we have three students so now i'm going to press yes you can see one student really deleted successfully now i'm going to delete this user then you can see it is removed from the tree and then it is deleted successfully so its working fine i think that's all for the video if you like the video then like share and subscribe my channel

Channel: rojkharido

Views: 1,639

Keywords: flutter firebase tutorial, flutter firebase firestore, flutter firestore crud, flutter firebase realtime database, cloud firestore flutter, flutter firebase database, flutter firebase realtime database crud, flutter firebase login, add firebase to flutter app, flutter firebase auth, flutter' firebase phone auth, flutter tutorial, firebase tutorial in hindi, firebase flutter in hindi, state management in flutter, provider flutter hindi, flutter tutorial for beginners, amir, rahi

Id: Aj4l9e2EzRU

Length: 101min 50sec (6110 seconds)

Published: Fri Sep 16 2022