 Hello guys, so in this video, we are going to perform SQLite credit operations. So in order to do so, we have created two separate videos for the same. In one video, we will be creating the UI part and in the second video, we will be integrating the database operations. So let's get started. So first of all, we need to take something as an example base. So what we are going, we are going to create one new page for handling the employees. Let's create add underscore employee dot dot and here we will be designing the UI part where we can add the employees into the database. Let's create a stateful visit. Add employee and here we need to return scaffold contains app bar. This app bar would have title that would be text and saying add employee. Just add const here and you can align your app bar data into center with center title and let's go to the body part and here we need single child scroll view. So under which we will be adding some column. Let's add a column with some children's and here we need to add some text fields and this text field would be for getting employee ID and employee name and employee, let's say designation and we can enter as well. So what we can do, let's quickly create a model for the same E M P O Y E dot dot and we just create a employee class here and quickly add final int imp id and final string imp name final string imp designation. Let's add pre in value for is mail and we just create one constructor for the same and here we will be adding the go add this dot employee ID the go add this dot name the go add this dot designation and required this dot is made. Save this and we just come here. So here we will be adding some declaration part. Let's add input declaration and here hint text let's say employee ID border outline input border and since everything is constant let's add constant. So let's save this and see how it looks but before that I just add a little navigation on this add button so that we can navigate to this. So let's use navigator push and we just add a root material page route and just let me put semicolon and add a border function here we need to go to add employee that's all. So let's go here and this is how it looks so we can quickly design it let's add padding around this first of all and now seems a little better. Okay so same way we can add some let's say keyboard as well so keyboard type text input type dot number save let's click here and we got number fine. So same way we just copy these text fields and just before that we need some controllers in order to get input from user. So let's define controllers here final text editing controller so ID controller is equal to text editing controller so I just copy this this is for name this is for recognition and we just assign it here as well controller ID controller. So since it is dynamic you cannot add const here let's go here okay so just copy this and use here for the name as well and we can remove this number because by default keyboard type is name type. So let's go here designation so we need to add little spacing here as well so let's add const nice to box view that here save this you can add it here as well now here for the gender we need to do what let's create a row with children here we can add a switch okay let me handle this and this value you can add is female variable for the same you can add is male as well let's go on the top and create one is female initial value is false we can remove this unnecessary import go back here and here we need to get the new value whatever is here so we can simply say set state here and simply say is female is equal to new value save this okay so we need two more things around it let's quickly add one row before this add children and this children text male and we can add some icon as well icons dot male save this so we can just add little decoration as well let's add poma and use color so if it is female then this male icon should be gray color colors dot gray otherwise color should be blue and same way we can add some decoration here as a style text style to use this color paste here and we can also make some font weight same way we can use if it is female then font weight dot normal otherwise font weight dot word save this same way we can copy this row and put it after the switch for the female and just change this to female change this if it is email then it should be both otherwise normal if it is female then it should be let's make it pink otherwise save if it is female it should be pink otherwise great save this one more thing we can just go here and use main x alignment to the center seems better yeah so now we left with the buttons let's quickly add buttons after this so we need added weighted button with on press we'll define later on child would be text and say add save so let's wrap this into the row because we need to add two buttons let's go here and copy this paste it here and this is for reset we can add some style here as well elevated button dot style from let's give it a background color let's say colors dot let's say do this yeah one more thing we need to add main axis alignment to space evenly seems better okay so design part is almost complete let's reset if i do something here so i just need to add little code for reset so what i need to do i want to clear everything and focus on this employee id so for that i need to use focus node let's quickly define one focus node over here final focus node focus node is equal to focus node and this should be used with first one that is this so let's use focus node and focus so what i want whenever i click on reset everything should be clear and focus should be moved to the employee id so let's use id controller dot text is equal to nothing name controller dot text is equal to nothing and this designation controller dot text is equal to empty and the last one is the switch so that is using is female is equal to false then we can simply say set state and we can also do what that focus node dot request focus that's all save this and let's try to do this here right away yeah it's working fine so let's try it again and reset this everything goes well okay so this part is completed let's create another page for the same so i just copy this and paste it here that would be edit employee so we want to update the employee so for that we have edit employee so i just quickly update this to edit and we can just copy this and change everything from add to edit so here we missed e and here i'd say update employee and instead of using add we have to use update one more thing here we want this first employee id should not be modified so for that we just right here enabled false save this let's go back and here we will be displaying the list of employees and whenever you tap on it you will be able to edit it so we will use it later on and let's keep it like this what we need else so let's quickly go to the home page so that we can just create some employees over here in order to test everything is working fine let's create list of employee employees equal to list dot empty and probable true and we just go here in in it we can add employees dot add employee so let's give it triple double one that's a b c and x y c and to save this and what we do is so we basically need to retrieve it from database so i just create one more variable bull is loading is equal to true so initially the loading will be true so let's go to the body here and we just check here we can remove this so if it is loading then you can simply display circular we can take a center and child will be circular progress indicator otherwise we can simply show a list view dot builder here we can add a builder which is going to return a list type here and i just saved this and before that we need to add here the item count as well that is coming from employees dot rent and in this list style we can add some child and before adding it we can just wrap this with a card so that it should look nice and here we can simply go with the title first and so use this text widget employees index dot name so let's save this and we just add const here since nothing is dynamic so don't tell this now what i want after some time if data is here i should make it true so so that this loader can be hidden so for the time being i just make it false so that we can test and let's quickly reload this so we got one abc so let's quickly design it first of all so what i do is just add one more employee here so that we can see better so this time it would be female and just say x y a s and just keep it anything because we are not using it currently so this is just a dummy data for decoration purpose under list tag we'll just add leading where we can add a circle avatar and here we can add some child that would be some icon that would be based on this employee gender so i just copy this and use here if the gender is male then icons dot male otherwise icons dot female save this same way we can add logic for this color background color so if it is male then you can say color start let's say blue otherwise color start pink save this okay i just reload this so that we can see both and you can just change the color of the icons to white permanently so go here and say color color start white save this okay fine so this is done with the dating this is title let's create one trailing as a for trailing we need icon button so on press we will handle later on and icon we can add icon that is icon start delete yeah let's add a post here save this and one more thing in the title path we can do what we can just add employee ID as well in the bracket so let's do some interpolations and here employee ID and for designation we can add sub title as well save this so fine and one more thing we can add little decoration to this title let's add style text style want wait want wait dot what save this we can add the const here since style is constant so that's all i think that's enough for the decoration so now we can go for add and we can see all this thing go back we can just tap on any of this and it should open edit so that part we need to do so just go to this this style and look for the on tap event so what we want we just want to navigate so basically let's go to navigator dot push and we want to go to this material page route the route would be let's pass the spreader function that would be const edit employee and here we should pass one employee so let me quickly modify this edit employee and we just go here and create one final final employee employee and this employee should be used here let's use it here required this dot employee save this and go back here and just pass my employee here so how do you get employee from employee that and just pass this index and we cannot use const here save this so that means whenever i tap on any of this i should be able to see that in this so in order to do so what i can do i can update this information over here so let's quickly update these controllers id controller dot text should be widget dot employee so we are assessing it from this so employee dot id and since it is that text is required we just go like this and name controller dot text is equal to employee name designation controller dot text is equal to designation and we left with is female is equal to so how do you get so so paste it is male then false otherwise to save this so we got this information and what i'm missing here so employee id it should be coming like so i just missed interpolation let's save this okay so 11 abc xyz and this is fine so this is female this is male so everything working fine so you can see it is not editable but these are editable okay that's fine so design part is completed