 Hello guys. So in this video, we are going to create a simple calculator. So you can see the default application over here. So from the main, we are calling run app that is used for running your application. And this is my app. So we have a class my app that is a state less widget and which contain a material app. So your app should be extending this material app. So this basically provide you some formatting and components. So it provides some title, theme data and some color schemes. So let's change it from title calculator. And we don't need these commands. We can remove it. And it is going to homepage that is my home page. So currently we are using this. Let's say I just give it hello so that you can save it and you can see the title has been changed. Okay. So what we need to do is we just remove all the things and we need to remove this as well. So what we will do we will create our own screen that is home underscore, let's say page dot dot and give it any name. So let's say this is my home page. So for this, we need to create some widgets. So I'm going to create a state full widget and give it a name. Let's say home page. Okay. And here this state full widget would have this great state method, which is again creating the instance of this class, which is maintaining the state of home page. Okay, so you have to override the build method over here. So here you need to return the widget that you want to display. So let's quickly return a text and something Hello, just put semicolon over here. And if you hover over it, you can see some error is coming on a kind of suggestion. So this text is basically a class. This is a constant type. So we should add this constant in front of it. So since we are not using these dependencies of classes, so we are removing these imports, save this. Now this home page, we can directly use it over here with const home page. Okay, just save it. And you can see Hello is coming on the screen. Now this Hello is coming because we are not using any kind of material app or something. Okay, so what we need to do is we are using this material over here. Whose home is this? So this material provides some components. So we need to return here some specific component. So main thing we have a scaffold here that provide you some basic building blocks of the screen, like the title bar, like the drawer and some floating action buttons and other things. So let's return this. If I come inside this scaffold, I can pass some arguments like one of them is a bar. So let's enter this and you can create a app bar here. So just go for this one. And inside the app bar you have some title and you can specify the title. So you can specify the title directly like this and you will get error. So how do you know what type of value would be? So basically whenever you type this like title, you can see here it is expecting a widget. Okay, so that means we need to pass here text widget and where we can pass some text. Let's say Calculator app. Again, this is a constant. So just pass like this. So I just save it. And you can see immediately you got an app bar. Okay, so same way this scaffold provide another component as well that is body part. And this body is again going to expecting widget. You can see here. Okay, so let's go for this for widget. The simplest widget I am going with container. Container is like a division in STMA. This container basically provides some arguments. Let's go for some colors so that we can see where it is. So basically we have a colors class which provides some constants like one of them is let's say ember. Let's go for this. I just save it. And you can see this body is occupied the whole space. Okay, now what we need we need to get data from user. So this container can hold some things. So it can have a chart. Okay, now you can see this child is again expecting it widget. Let's go for this. Now we need to have multiple child in order to handle that multiple child we should go for such kind of widget which can handle multiple child. So we want to display let's say top to bottom. So for that we have a widget column. This column basically can have children. Okay, so that means we can have multiple widgets inside it. For example, we want to take input from user for that we have text field. And if you save it, you can see one text field over here. If I tap it and you can type something. Okay, now there are different properties of this text field as well. So let's go back to text field. And let's go for this. So we have one property declaration in put declaration. Here it is. So here you can define some borders. And this border requires some border. Let's see it. So we can go for input. Let's say outline. There is one input board. We can use this by saving. You can see immediately one line over here around this text field. Okay, so what I can do I just copy this and paste one more so that you can see we have two different text input fields. Okay, now for this we can use some further properties as well. Let's use for this. And we have we have any hint text. Yeah, we have so here you can simply pass the string. Let's say first number. And since we are not taking anything dynamic, we'll just put it const over here. And I just removed this one for the time being. So since everything is constant, so we can put it here. Okay, now you can see this is a hint like a placeholder in HTML. Okay, so this is fine. In the same way we need another text field as well. And but before that, if you need some space in the top, we can have another widget that is sized box. So we need some height, let's say some height of 10 pixels. And save it. So you can see some space away. Now the thing is we need little space around this. So you can either specify margin around this text field, or you can add padding to its container. So that is your choice. So we can go for this padding. And for padding, we have to specify I just show it to you. We have as insects. Let's go for as insects dot all side I need. Okay, so let's give it 20. And since it is again static everything, so we just put it const. Okay, now seems better. Later on, you can move this color as well. That's not an issue. Let's comment this. And here you go. So this is fine. Same way we can create one more text field in order to take second input that is Second number. There you go. So we need a little space between these. So I just copy the size box and put it over here just before the second text field. Now we need some buttons. So for buttons, we have different widgets, like one of the widget is material button. And you can see this is required one property that is on pressed. So which takes one function away. So now this is not a constant. So we need to remove this constant from here. And you need to add it separately on all the constants. But you cannot add it on dynamic values. This on press is not a constant. So that's why we were getting this on press whatever you want to do. Code. Execute on button. Okay, so we will come to this later. And. Do we have any other property? So we have one another property that is child child. That is again asking for a. Widget. So we'll use widget like we want add. And since it is a constant, just mention this. Okay, now you can see we have this button over here. So since it is not visible, you can change the styles for the same. Okay, so there is another approach. We have another widget for button that is elevated button. By the same way, you can see a button over here. So basically this elevated button is using the styles from the material thing, whatever we have provided here. This one is using this primary switch. But for material button, we need to do some other settings. We will do that later on whenever required. So let's go with the simple one. This is how we can create a simple button with some text add. Now we need multiple buttons. This one is for. We just add one comma over here. And this one is for subtract. Save this. And we need. Two more. Just copy this. Add comma, paste this, add comma, paste this, change this from subtract to let's say multiply. And divide. Save this. So we got these four buttons, but I don't want to display these buttons like this. So we were using the column widget. That means on one line you will be able to see one widget. Now I want to see these widgets in horizontal direction. So for that, instead of using this button strictly, I just cut these buttons. From here. And I will create another widget that is row. This row need to use this children. And paste it. Just save it. Now you can see all the buttons are coming in one line. Now to arrange it in a proper spacing, we have some properties of row as well. Let's use main access alignment. So it takes main access alignment dot. Either you can put it in the center like this. Or you can use another constant like paste even. It will automatically manage this space. Okay. And if you need a little space between these. Expiration buttons, you can add one more size box. I think that's all. Now you can see we need the keyboard that can enter the number. In order to do that, we need to use one more property here. Here that is keyboard. So text input type dot we need number. So let's type it type dot number. And same thing we need copy. Over all the text fields. It's better to go design your first text field. And then you can use it to reuse it basically. Now if you can click here and you can see the keyboard is now coming for numbers. Okay. So all when now what we need when we click on add button, I should be able to. Do the sum and displayed somewhere. So what I do in order to display the result. I just create one more widget over here that is text. And the data would be coming from the variable. So result. Let's say I will create a variable dollar result. So with dollar I'm referring to a variable that will display some value. So I need to create a result variable just go for this well and create a field result. So this result will be of double type or you can take it off in time. So that's depend what kind of values you need. So since we cannot declare a variable like this. You want you can either make it late motive late modifier we can add it so that we can assign the value later on. But I will do what I just keep it with zero. Okay. And what error you are facing. Make sure you don't add the semicolon here. Just save it. And immediately you can see the result over here that is 0.0. One more thing I just add little space over here. Copy this. Come before this pasted. And if you want to make it a little bigger we have the style. Just use the style property and assign a object of text style. Where you can again pass some values like size. That's font size. Let's give it 22. And point weight is there. That is point weight dot board. And I think that's all. So since these properties are constant kind of thing. So we just add this constant. It's fine now. Okay. Now we left with only the additions and these operations. Okay. So let's go for this ad first. Here we need to get value let's say four. Two. And when I click on add it should do addition. So we are not doing anything. So first of all how to get this value entered by the user. So in order to get the values from this text fields we need to add one more property that is control. Okay. So for that we need to create controllers first. So let's create controller on the top. Here. So we can remove this property now we are not using currently any other specific. Widget. Let's create a variable that's a final text. There is editing controllers. First one is first controller. Is equal to text editing control. Same way we need one more controller for the second one. So that we can assess. Second values as well. So just simply go to this controller of text field and simply assign first controller. So we are facing the error. So we have mentioned const over here. So simply cut this const and come here and paste it since we are using this dynamic controller. Basically this is a variable name not a constant. So that's why you cannot create this as a constant whole. Okay. So same thing we need to do for the second text field. Just go here. Cut this thing. And paste it before input decoration and simply create a controller that is second controller. Now controller is attached. Controller is attached. We need to simply assess the values from the controller. So how do you do so simply. I will say. Spring. Spring. A is equal to. First. Controller dot text. So this is going to give you text. Okay. You need to further convert it into integer. I just do for the second controller as well. Keep it into V variable B. And now we just need to convert this into integer int dot. Pass. And just pass this A. This is going to give you a number back that's int and one is equal to like this. Okay. So what we can do we can replace this. Here. In order to short the code. We can simply get this text and pass it into integer. Since we are passing it into integer we can keep it into. Integer variable. This is done. Now we need to do what we need to change the value of this result. Okay. So we will do what. Result variable we have already created is equal to A plus B. Since result is of double type we can do what we can simply convert these variables to double type. Okay. And since we are assigning to double variable instead of using this int we can use double. Okay. I think that's all. So now whenever you type two and three add you are getting nothing. You are getting nothing. But what if if I try to print it like. Result. Okay. Just check it out. Is it working or not? I just clear my logs. Click on add. And you can see we are getting five. Just type 20 and 30. Just clear this. Click add. I got 50. So that means the score is being executed but the values are not reflected on UI. So in order to do that you need to call set state. Okay. So generally what we do we just put the content that you want to change under the set state function. Okay. Just save it. And you will be able to see the result. Let's say 303 plus oops. Let's say 303 plus 20 that is 323. Simple. Now same thing you can do with the rest of the buttons. I just delete this. And copy this. Go to the subtract button. Paste it. And just change this to subtract. And just go for this. Multiply. Change this. Operator to multiply. Same way for divide the space state and change the separated to develop. So just go ahead and save it all done. And you can simply try with let's say 200. Let's say divide. Just go for this. Add 230 subtract 170 multiply 6000 divide 6 minus something. So that's all for this video. And if you want to hire this debug icon, just go for your mean. And here under this material app, there is a property show debug banner mood. Show debug show check banner. Just put it into the value is false. You need to sign. So this will hire this. So that's all for this video. If you have any doubt, just let me know. Thank you.