 Hello guys, so in this video, we are going to integrate firebase in order to perform the current operations with firebase So in the last video, we have created this user interface where we have displayed some dummy data Some icons we have added in order to edit and delete and that this action button for adding a new student So let's get started with the firebase integration So first of all we need to log in to this firebase console So simply log in with your credentials and create a new project and specify the name of your project So let's say I just make it firebase hyphen grud hyphen fire flutter Flutter Just continue and scroll down. We don't need this analytic for the moment. Just create it So it will take a few seconds to wait. All right, so just continue and Here we need to just go for the platform. So currently we are working with the Android So I just go ahead and configure Android here So here we need Android package name. So this what we can do generally This is the application ID in build dot grader. So we just go to app level build dot grader under this We have this app We have build dot grader. Just look for the application ID So here it is Just copy this and paste it over here. Now here. This is a nickname which is optional and You can specify in order to quickly identify. So I just make it fire base grud flutter And this is a sh key. So here we can define some key So this key generally we can get it from using some tools So this is required in order to use dynamic links and Google sign-in or any phone authentication kind of thing So currently we are not using it. Let's skip this or if you want you can just take a look on this page And we can just configure it quickly. So the easiest way is just go scroll down and we have this grader w2 So just copy this command Go to here in Android In Android we have directly grader w2. Just see this one Simply right-click on this and say open in integrated terminal So once open paste your command and wait for few seconds So we got this sh1. Just copy this and Go back to your fire base and Paste it over there. That's all. I'll just show you app and you need to download this JSON file and You need to put it into your project and App level root directory. So I just open this and I just copy this Close this and open my project directory and under Android and under app folder just paste it That's all Just hit next Now you need to follow these instructions. So first of all you need to go to root Level grader file. So just go to your project and build dot grader So I just go to my this is project and simply build dot grader And what do you need to do? Make sure you have these Google and Mabel central in the repositories. So we have both and You need to add this dependency Just copy this and under dependencies. Just paste here this dependency done So you can also cross check these two things are coming under all projects. So under all projects Sames are available. Okay. That's fine. Now next is you need to go to Build dot grader that is material level. Just save this file first of all Go to now under app folder. We have Build dot grader. So go here. So what we need to do? So first of all, you need to add this under plugins ID. So copy this scroll So just look here. We have this Plugin so this one is quite different from this. So you need to use your mind here So under this plugins, we have to use it like this. So here the formatting is different So here we will just use this Paste it and simply use this copy and replace this ID with this and Next under dependencies, you need to add this bomb so go to the dependencies and Paste this bomb here So that's all Yep, so continue to console. So that's all a few more things we can add on first of all You need to change this min SDK version to 21 Otherwise, you need to manually enable the multi-dex as well. So in order to prevent that I'll just keep it 21 and save this file Now we can just close this Now we need to add dependencies. Just go to pubspec.org.ml and find your dependencies and under which you need to add this Firebase core in order to connect with Firebase app and we need second dependency in order to perform Database operations that is cloud file store Just paste this and save this So it will fetch the dependency once you save it is not fetching you need to manually fetch it. Okay So let's wait So we can just close this now we need to do a couple of more settings here so we just need to go to this main and And here you need to do two things the first thing is ensuring the initialization widgets letter binding dot ensure initialize The second thing you need to initialize firebase firebase dot Let me import this firebase dot initialize app Just do this. So this method is basically a feature. So that means we need to await for this And just write a wait in front of this. So if you're using a wait, you need to make this main async So that's all we need to do Basically, so after that we need to stop the app and we need to renun it Let's run it quickly and check everything is fine So it will take some time. So you need to wait Okay, so for your knowledge, I have fast-forwarded this video in order to reduce waiting time So we did not get any error Okay, fine. Let's go ahead and start performing the actions. So first of all, we just go to the firebase project and We need to go to this bird and Simply go for five store database So if you can recall the previous video We have created a student model the same way. We will just create one database over here So we will start with the test mode Let's go next and you can select whatever region you are Staying in so I will just go for This Asia south Enable this Okay, so once it is done You have to start with a collection and give it any name. Let's say we just keep it students and Just next and here we need some document ID So most of the time we use auto ID in order to avoid manual creation of IDs So let's create Auto document ID and give it some fields. So if you can recall your student model, let's go to this just Student we had few properties that is ID. I just go there and The ID would be this string and for each Document we just keep the ID like this Okay, let's go here next and second. We have this roll number. We just Go here. This roll number would be basically a integer type So we just follow it from here and we just need number here and One This is just a template so that we can start with something and then we need Name and marks. So name is again a string. The marks is double. So name is string. You can give it a dummy Let's quickly add marks as well make it number and We can give it some value. Let's say 12 and save this. So you got your entry way Okay, so let's go back to the project and do write the code Let's go to add student first And here we have this button. So on this button We just call a function that is add student and We will navigate to the home screen back and Navi Get to home So here we need to pass the student object and how do you get your student object? Let me quickly create a student object here student Student is equal to student and how do you get this all stuff? So id we don't have currently So we can remove this We can use this roll number from where you will be getting roll number So roll number we will be getting from roll number controller dot text And Since it should be of int type. So we need to just cast it into int So we'll use int dot pass and just paste this Second argument is name. We will be getting it from name controller dot text So it is string. So we don't need to Discast it And the third is max. So max you will be getting from max controller dot text So since it is in double. So we just passed it to double And we are facing some issue here int This id is required So what we can do We just go to the student object and make this id as optional So we need to remove this final And yeah, we can remove this as well Just save this And go back here and yeah, so here we need to pass A few things that would be the student object And the second would be we need context as well in order to navigate to some another screen. So let's pass context here So we just create a method here And Go to this And here what we need to do We need to just insert it into file base So in order to do so first of all, we need reference to fire base And how do you do so final student Reference is equal to fire base fire store Dot instance dot we have a method Collection and we can pass the name of the collection that is students So we can just close check it What was the name here? So it is students. That's fine So for this students, we need a new doc basically so that we can insert one new entry So this actually going to give you one Reference back that would be used as the id of the student. So let's Do what? student dot id is equal to student, let me just Use the case properly student ref dot id Okay, so this doc going to create a new document entry and we're going to get id from that entry So finally you need to convert your data that is student object to Station Okay, so this we can pass to fire base in order to insert. Let's keep it into the final data variable And now we're gonna use student reference dot set and the data And when it is completed Dot do we have when yep when it is completed what to do? So when it is completed, we can just navigate to the home page Or we can just convert this arrow function to the ordinary one And we just log here Let's say user inserted So that we can see on the console and we just need navigator Dot push replacement. This is going to give me the updated data So I'll just show you what is the benefit of using this. So let's quickly use material page route And simply use this builder arrow function and navigate to home page So just add const here and all done So this time when you insert something it should go over here Let's go to this mobile app and add a new one And just use here. Let's say roll number is 2 The name is let's say eric and the marks are let's say edina Okay, and just add it And you can see here one new entry is here Okay, so that means we have done with the insertion operation So let's go to another operations like delete So simply we just go to this home page And go under the delete icon So here we need to perform the lead operation Okay So in order to do so first of all we need again the reference Let's create a reference on the top So we don't need this. Okay, we will delete it later on And one more thing we can simply convert this into stateless since we are not maintaining any state So we can remove this const here and in the mean we can even remove this const And in the add student we need to remove that const Since we just made it stateless and we are not passing any key. So let's go to home page rack We don't need this key here So what we need we just need a final collection reference Let's make it underscore reference is equal to fire base fire store Dot instance like we have done dot collection And here we're going to pass that student's name of the collection And let's go back here and just put the semicolon in the last Okay So this reference we're going to use for doing that Deletion operation. So we just go back to delete operation And come here paste this thing over here Document let's go for the doc and we need to specify the id which we are getting from students and then index dot id And we can use dot delete here Just save this and let's go back to this fire base And this app and since we are not displaying it over here So you cannot delete it. So let's cross check this delete operation later on And let's quickly go for this update part whenever you click on this So we just display this information here So before going to update let me quickly retrieve this data over here So that I can perform the real-time operations on the data coming from fire base So here in order to get data We need to use a synchronous call So what we can do we can just Cut this part the body part this part And we just make a another method for the same to underscore get body And we can just create this let me add comma here And we can just create this get body From where we can return a widget And just do what return that widget So I think that's fine Save this Okay, now this body part we need to wrap it with some another widget That is let's say future builder So this future builder Basically going to give us data whenever received from that file So this basically have the future option That is reference dot get So since that's Get is again you're getting the data and it returns the future query snap flow So what we can do we can better just specify there the future builder is Getting this query snap here Okay, and what else we need for this future builder we have the builder part And we have this context and snap here So here first of all we need to check for the error So let's check for if your snap here thought as error Then you can simply display the error then you can do what simply return The inter widget And inside the center widget, we can just return a text And saying let's say something event Wrong And just make it const Okay Second scenario if Data received We just make it the comment here check for error And how do you check if data is received if your snap here dot as data The data you will be getting from snap here dot data So this is basically returning one query snap here. Okay, so we just keep it into query snapshot variable And since this is basically optional, we need to explicitly specify this Okay, fine From this query snap here you need to get All the docs So this docs is going to give us list of query snapshot. Okay So let's Use this and assign it to list of query Snapshot To documents Okay, so once you've got this you need to convert To the list Basically convert this coming data to the list So how do you do so we need list Of students basically So that would be students Is equal to docs That is your documents dot we have that Map And here we need to return That particular student each time. So how do you get that student? Let's quickly create a new student object and this data would be Coming from that E so this e basically going to give you the data. So what to do is We just use e and then like this And the second one is for Name that is e Just use this and this And same way e Use this And one more thing we left with that is id Let's use the id as well e id So let's close check If everything is right So everything is done. Just we need to add dot To list over here in order to get the list of students So once we got the list Now we can use it and this list we can simply pass to Just go here and simply return that body part Return that underscore get body and here we should pass this student And this body part should accept students Okay, and we can just Remove this student and just comment this And let's quickly go ahead and check for the errors So What's the error So here this part we don't need now Since we have used it properly And we have any other error. Yes. So it is showing one error So basically here we are returning And here we are returning Otherwise that means nothing is happening. That means our data is not received So you can otherwise return Basically a loader Loading So how do you do so? So simply just return A center widget Which is having one child that is circular progress indicator So I just Add const and That's all just save it Let's try to reload this So we got a little error over here. So this is basically marks That is saying int is not a subtype of double We need to just Pass it basically Let's use double Dot pass and just pass this Okay, I just save this and restart this And simply go to the student object and whenever we have this Double we just mark it as num So that it can handle the both type of data integer as well as string Number So let's try and see so this time we are able to see this Eric and dummy. So both are having over here 89 pro number two roll number two 89 marks and the second one is pro number one having 12 marks named dummy Okay, so we are getting data now and we can try to delete this as well as we have already added the code So you can see the data has been deleted And what we left so since data is deleted it is not reflected So what we can do we can either use some stream in order to cross check this Or we can use one more trick over here whenever we delete We just reload this page. So how do you do so? to refresh We just use navigator dot push Replacement and we can use this route to the same page So use material page route and just use this Arrow function and simply say on page Okay, I just added one extra and Save it Okay Oh, that's all. So delete is done. Now we left with this update operation. Let's try to update This Eric. Well, let's go back here and just add one more That's a roll number is three That is Rio and the marks are 68 Just add this You can see it is coming over here Okay So if I had not used this Push replacement over here this data had not been refreshed Since I've used push replacement. It is replacing it and reloading the data from the firebase So what we can do now So let's go back to the update and write the code over here so here First of all, we need to create a new student. That is student updated student Is equal to student And we need to use that id here as well I'll just use gamma and Here the id would be the id would be coming from that Student here which we are getting whenever we are just opening this page So this is assigned And from here what we are doing we are just getting this id So we are not updating any id. We are just updating the rest of the data Okay So I just add one more comma here And this roll number is coming from here. So whenever we let's say just go for this And we get three yo and 68 marks. So whenever user will modify this, let's say the Name I just changed to verma. So that means this should be coming from that controller And same way roll controller dot text And same way marks controller dot text And we just need to cast this to that double dot parse And same way we need to cast it to int parse And save this So this is fine for getting a updated student And now we just need to update in firebase as well final collection reference I just correctly use This variable is equal to firebase firestore.instance.collection and give it a name that is students And next We use this collection reference.talk and which talk we need to pass the id that is up dated student dot id dot We have this update method updated student dot to json and dot So do we have when completed? Yes, when it is completed what you want to do? So I just convert it into normal method instead of arrow one So we just log student updated And we just navigate back to the home page. We need to use navigator dot push replacement So here again, we are using replacement If you use pop it will simply go back and would not refresh your home page. So let's return this material page route and simply return this arrow function and pass this home page So that's all Let's try to go back And let's say I will update this real And the marks should be let's say 50 That's a 41. I just update it And you can see the marks are coming like that. Let's quickly add one more the roll number let's say four the name is Pooja and the marks we can give it 23 And just okay and add So here it is inserted as well So same thing you can see that is coming in the Firebase as well see here we got this That is Eric This Rio With roll number three and the marks 45 And the last one is the pooja with the 23 marks roll number four. So one more thing If you're getting this back button What we can do into this add student page and instead of using push replacement we can use push and remove until And here basically we need to return one more function That is this one which is predicate. So this actually helps in clearing the back stack So that no previous route should be there We just use this like this And we just give it fourth and we can remove this actually So save this So once let me show you once I add it again. Let's say the roll number is five the name is Komal the marks are 55 and just add You can see this back button is removed Okay, so that's all for this video. If you have any doubt do comment in the comment section. Thank you