Calculator App in Flutter Step by Step | Taking user input | Adding Events

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 mean 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 stateless 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 home page that is by homepage So currently we are using this let's say I just give it hello so that you can see save it and you can see the title has been changed okay so what we need to do is we just remove all these 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 you can 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 stateful widget would have this grid 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 or a kind of suggestion so this text is basically a class this is a of 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 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 is 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 ABBA 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 again this is a constant so just passed like this so I just save it and you can see immediately you got a okay so same way this scaffold will provide another component as well that is body part and this body is again gonna 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 HTML so this container basically provides some again arguments let's go for some color so that we can see where it is so basically we have a color S Class which provides some constants like one of them is let's say amber 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 fold some things so it can have a chart okay now you can see this child is again expecting a widget let's go for this now we need to have multiple choice in order to handle that multiple charts we should go for such kind of widget which can handle multiple joints so we want to display let's say top to bottom so for that we have a widget column so this column basically can have children okay so that means we can have multiple widgets inside a for example we want to take input from user so 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 like this okay now uh there are different properties of this text Fields as well let's go back to text field and just go for this so we have one property decoration input decoration yeah 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 out line there is one input board we can use this we save it you can see immediately one line over here around this text View okay so what I can do I just copy this and paste one more so that you can see we have two different texts input fields okay now uh for this we can use some further properties as well let's store this and we have we have an hint text here we have so here you can simply pass the string let's say first number and since we are not taking anything Dynamic so just put it const over here and I just remove this one for the time being so since uh 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 pixel 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 adding and for padding we have to specify or just show it to you we have ADD insert so let's go for Edge insets dot all side I need okay so let's give it 20 and since it is again static everything so we just put pick cost okay now seems better later on you can remove this color as well that's not an issue let's comment to 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 this 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 but then and you can see this is required one property that is on pressed so which takes one function okay 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 L on press whatever you want to do code execute on button press okay so we will come to this later and do we have any other property so we have one another property that is chart so child that is again asking for a widget so we will 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 thing okay so there is another approach uh we have another widget or button that is elevated button if I save it you can see a button over here so basically this elevated button is using the styles from the material theme 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 app now we need multiple buttons this one is for uh 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 these buttons directly I just cut these buttons from here and I will create another widget that is row so 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 mean access alignment so it takes main access alignment dot either you can put it in the center like this or you can use another constants like paste evenly so it will automatically manage the space okay and if you need a little space between these text viewers and 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 so in order to do that we need to use one more property here here that is keyboard so text text input type dot we need number so let's type it type DOT number and same thing we need copy our all the text fields so it's better to go design your first text View 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 display it 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 bulb and create a field result so this result will be of double type or you can take it off in time that's depending what kind of values you need so since we cannot declare a variable like this you want you can either make it late modif 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 0. okay and what error you're 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 paste it and if you want to make it a little bigger we have the start 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 font weight is there that is not wait dot board and I think that's all so since these properties are constant kind of thing so we just add this const it's fine now okay now we're 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 let's say final text that is editing controls 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 or text feed 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 a is equal to first controller dot text so this is gonna give you text okay you need to further convert it into integer I just do for the second controller as well keep it into variable B and now we just need to convert this into integer int Dot parts and just pass this a so this is gonna give you a number back that's int N1 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 so 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 so and since we are assigning to double variable instead of using this ink we can use tapat okay I think that's all so now whenever you type 2 and 3 add you are getting nothing you're 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 right just type 20 and 30 just clear this click add I got 50. so that means this code 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 a 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 sorry let's say three zero three plus twenty that is three to three simple now same thing you can do with the rest of the buttons are 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 this operator to div so just go ahead and save it all done and you can simply try with let's say 200 let's say divide uh just go for this add 230 subtract 170 multiply 6000 divide six point something so that's all for this video and if you want to hire this debug icon just go for your main and here under this material app there is a property show debug Banner mood okay show debug show check Banner just put it into the value is false you need to assign so this will hire this so I that's all for this video if you have any doubt just let me know thank you

Channel: Jatinder Verma

Views: 1,902

Keywords: flutter, calculator, user input, ElevatedButton, MaterialApp, Scaffold, AppBar, Container, Column, Row, Text, TextField

Id: 3VDM7eObn2I

Length: 22min 48sec (1368 seconds)

Published: Thu Oct 06 2022