 hello guys so in this video we are going to perform crud operations with firebase in order to do so first of all we will create the ui part then we will integrate the firebase into this so let's quickly start with the ui part so before going to the ui part i have already prepared what data i want to display so just go to this website quicktype.io and create the model of your data so i just added few fields like id roll number name max so id will be holding for id of each row in firebase so that's why i have taken id so for that you need to select dot make sure you select these two options that would be helpful just copy this code and create the model come here and just create a new file let's say student dot dot and paste this code over here so here you need to remove this this is not required and you need to remove this add symbol in front of required and i think that's all for this so my model is ready let's close this and we can do what we can have some dummy data over here so let's quickly create a dummy data over here so i just create a list of student that's students is equal to and just create a list like this student so let's give it some random id and roll number let's say one name let's say name one and max you can give let's say 33 or let's give it 32 and i just copy this and create two more in order to use it and display on the ui part so let's give it name three name two and id you can keep same because we will not be displaying it just save this now let's come here in the ui part of body so here we gonna check for the data first so let's quickly check if your students dot is empty then we can display a simple text like this and we'll say no student yet and in next line we can say click plus icon to start adding and if it is not empty then we can simply display the list view let's create a list view dot builder and just use this item builder here we will get context and index and here we can display the row so we can let's simply display a card and we can design it let's create a list tile and here we can use that title which is again expecting a widget so simply use this text and you can get the data from that students index dot let's say name of the student and let's add the second property as well that is your item count so if you haven't checked my video for creating a list view you can check out I will add the link in the description so let's say item count that will be coming from students dot length so this is the ui part and yeah so for this adding a student we need to design new page let's save this and check so this is coming like this so let's go to this tile and create a leading part and we will create a circle avatar for the same and here we will add the radius let's give it 25 and we can use the child here let's take the text as a child and we will display the marks over here let's do interpolation and say students index dot marks save this now we can add sub title as well let's try with that and this is again expecting a widget so let's do interpolation over here so that would be roll number and this and it should be save this seems better and we need that icons for edit and delete as well so let's go to the tile and create the trailing part as well for trailing we need two icons so let's create one sized box for the same and here we will use some child here we will add the draw and in row we will add two children and the children would be the first one would be the icon so these icons should be clickable so let's create an icon first then I will show you icons dot edit and second icon is before that let me wrap this into the ink well so that we can tap it or you can use gesture detector as well so let's use ink well and we can simply add another property for the same that is on that so here we need to execute the code whatever you want to do on the click of edit button so let's add a comma and copy this and paste it and this time we need delete icon and you can add const here since we are not going to get dynamic icon so before saving it we need to do one more thing so for this size box we need to define the width let's give it 60 and check this okay fine so if you want you can just change the color for the same as well let's try with color colors dot let's say black dot with opacity and we can use 0.75 and we can remove this const just save this and when you can change the color for this icon as well let's quickly remove this and try with this comma and save this and if you want you can change this color to red and save this fine so seems better so this is the displaying part and let's try to just comment this and cross check when there is no student what happens so let me just read out this okay so here no student so what I need to do I just need to add alignment here so text alignment text align dot center and that's all okay so let's uncomment this back for the time being and see if anything else I can do let's reload it okay so one more thing I can add for the decoration is I can change the color of the card based on the condition so let's use color and we will add condition like if the students index dot marks are less than 33 then the color should be colors dot red dot let's use shade 200 otherwise we will check for one more condition if the marks are less than let's say 65 then colors should be colors dot yellow dot shade 200 otherwise color should be green so colors dot green dot you can use it like this okay we can just change the shade to 100 better yep so let's keep it like this so since the color is red here so we can remove this color part from here and let's add points back and save this so that's all for the design of this home screen let's quickly add one more page in order to add the student so go here and simply create add underscore student dot dot so here we need a stateless widget and we can name it add student so so let's return scaffold in which we can add app bar and in app bar we can add the title that is text and saying add student and you can make it center let's add const here and you can use enter title to group and in the body part we can return single child scroll view so that it should be scrollable let's add a child which should be the column because we have to add multiple things over here and in column we can add children and here we can add the text fields so let me create a custom method over here which gonna return me the widget get my field this gonna return one text field so because we have to use it multiple times so use it here so let's say get my field so let's save this and first of all quickly link these pages so here we need to go to add student page so use navigator dot push so we will push and define the route let's create a material page route and just define the builder with a function returning the page so let's say add student so let's add const here save this and let's check this work yes so it is working now what we can do we can quickly design so first of all let's create some named variables let's pass this as a decoration input decoration and here we can use that hint text hint text is basically looking for a string so let's give it string enter dollar hint text and you can use other properties like label text which we can simply give this and let's use some border as well so we will use const outline input border and here we will use that border radius border radius dot all and radius i s dot circular five save this and go here we need to pass this let's say the first one is for getting roll number so let's say use this hint text as roll number save this so what we can do we can add just padding around it so give it some padding like 10 pixels that look better yep so if i click on this it is displaying like this so roll number i want it as a number so i will change the keyboard type as well so add text input type text input type we will add some default value text input type dot name so if no text input type is given then it should accept this one otherwise whatever passed i will use keyboard type is text input type and go here and quickly pass this as text input type is text input type dot number save this so let's try it again we got numbers the same way you can create other fields as well let's create word name and we don't need this because default is already assigned and another is for marks and just save this so all well yep now in order to get the input we need controllers as well so let's quickly add the required argument that is text editing controller and controller so this controller we need to assign to the controller property of this text field so with this this i think this was complete and here we need to create three separate controllers for these text fields so let's delete this unnecessary code and we just create it over here let's quickly create text editing controller that is roll number what's a roll controller is equal to text editing controller so we can just make it final as well since we will not be changing it so let's quickly create other tools as well that is for name controller and marks controller and we can pass it over here controller is let's say roll controller and this one comma controller is this is for name controller and this one controller is marks controller so most of the things has been done we need two buttons one for editing and one for resetting let's create a row widget with the children and elevated button here on press we will define the code later on this is for let's say to do adding a student and here the child we can add a text and we can say add just add const here save this and you can see this let's add a comma here and just create one more button over here this one is for clear so we will just do reset over here and what we need to do whenever someone is clicking on this we need to clear the data from these three controllers so let's quickly do what use that code and clear that so paste this and change this to name controller and change this to marks controller save this so here we need to change the property main access alignment to space let's take it evenly that's fine let's quickly change the style of this reset and let's use the style property so we can use alley waiter button dot style from property and here we can add background color so that this color start let's use blue gray so I think let's quickly try this and reset and one more thing I would like to add here is I want to request the focus into this instead of mark that's a reset yep so for that what we need we need to create one node here so let's quickly create a node here that is focus not focus not is equal to focus not so this focus node we need to use just use it to the field wherever we want to use so I want this over here so let's use focus node here that is focus not so that means we need to create one more argument over here let's create one more that is focus node and focus node so we can keep this nullable because we may have null or we may not have so let's quickly assign focus node to that focus node I think all done so are we missing something yes this comma and that's all so let's save this and check this is it working nope so we have just added that but we need to add the code here to request the focus to that particular node in order to do so we need to just use focus node dot request focus yep just save this so all done let's reset it and you can see it is going over here so let me just quickly type it something and reset it that's fine so this UI part is complete so same way you can add the same UI for updating the student so I will copy it and paste it and just rename to update student so in case of update student one extra thing I will add so what I need I need one student over here so I just do what let's quickly create a student over here student and that student should be coming as an argument over here so I have created a stateful widget so let's quickly convert this into stateless let me and we don't need this key over here so you can define it here so let's say final student and just use semicolon over here and in order to resolve it we can do what we can just add a constructor with the final field and we can remove this const so that's all so that means whenever I will tap on this edit button it should open this update student okay and one more thing whenever it is opening this we need to add the information of the student to that edit text so let's do that as well so simply do what use these controllers roll number controller dot text is equal to student dot roll number and what error we are facing so int can't be assigned so what we can do we can just do the interpolation just use this and name controller dot text is equal to student dot name same way we will use this for max and this is for max controller so we need to update one more thing that is instead of adding a student it should be update and update student and just we left with this when we tap on edit icon we need to do what we need to navigate to update screen so for that again I will use navigator dot push and for route we will use material page route for builder we're gonna return arrow function and here we need to pass update student page so we missed it so this I think we missed it we need to rename this to update student and then we can call it over there let's go back and just change to update student and we can pass the student student we will be getting from students and index so that's all let's try to check this as well let's go for name one and you got problem number one and fine four let's try with the three that's fine so that's fine one more thing I can just add is I just need a little spacing before this so let's add a const sized box and having height of let's say 20 is enough save this and same way we will do so with add and I think that's all for the design part now we can move to the second part that is firebase integration