Flutter Calculator App Tutorial for Beginners

hey what's going on guys welcome to another tutorial in this tutorial we are going to build this calculator app in flutter so this is a basic calculator that does basic math as you can see we can do some math just like that or we can delete numbers one by one or we can clear everything you can find the percentage of a number and things like that so we are going to build this calculator app and try to add as many functionalities as possible so and then after that you can work on it and improve that to your preference all right by the way you can find the source code for this calculator in the description I'll leave the link there so let's get started let's open up our terminal and create our flutter project for that we can run flutter create command line with the name of our application so the name of the application will be calculate War okay so you can change this name to whatever name you want if I run it it should create that default flutter counter app project in a second so now we're done we can change the current directory to the newly created project directory for that we can use CD dot the name of the folder that is calculator so now I can open this project inside my vs code using this code dot command line once the project is open you can come to this lib folder and inside there we have main.dart file and here we have our default flutter counter app so we can actually check it on our emulator so as you can see I have flutter emulator is selected I can open that up so now if I make this smaller and run the app you should see the usual flutter counter app so here we have the app that is running so this is a counter app as usual the depending on your photo version the UI might look a little bit different but the functionality is the same for this application okay now we don't need this app so we can actually remove the code for this app so here I can remove my home page widget so I can remove all of it and here let me close this I want to remove the comments as well and this one and we don't have this my home page we can remove it and now we are left with only main function and the my app stateless widget which has material app now we can change the title to our liking that is calculator okay now for the theme I want to use dark theme so theme dot dark and for home property I will create a new widget that is going to be calculate War screen okay so we'll create this in a new file let's open up our lip folder again and inside there I want to create a new file the name of that file will be call calculate War screen okay screen dot Dart here I want to create a new state full widget State full widget so the name of this widget will be Cal calculate War screen as we Define it inside our main.dart file for home property of material app now we have this calculator screen set for widget and we can actually import that here if I import it our uh error should go away okay just like that we can change this to const just like that as you can see here we don't have any error and we can save it and we can come here we can save this one as well if we save it now we are left with this black screen okay because we don't have any scaffold Define it inside our calculator screen yet so I can close this main Dart file for now we don't need it now we can start building our UI so first of all I want to return a scaffold from this build function if I save it now we have dark gray screen because we set our material app Theme data to Dark theme so scaffold has body property so we set this body property value to column okay just like that because column will enable us to have multiple widgets inside One widget so I want to divide the UI into two sections one is output and second is buttons okay let's write some comments uh first one output and second one is going to be buttons just like that so for the output I'm going to have text widget and for the value I'll set this to zero as hard-coded value for now if I save it now you can see Zero at the top but there's an issue with it as you can see it's under this Android top status bar I don't want this to be under this app bar if you want to avoid your widgets to go under operating system UI you can actually wrap your widget with safe area widget this will prevent from that kind of issue okay so here as you can see Zero is under this top app bar I don't want this functionality to be applied to the bottom part that's why I can use this bottom property and set it to false just like that now let's style our output text widget so text style and text style of I want to give this font size and font size is going to be 48 and let's give this font weight as well and font weight is going to be font weight bold if I save it now we have a big text okay so I want to position this widget to the right and also I want to actually give some padding let's do that first of all let's give this text widget text align okay text the line property and text a line of end we can do that and let's wrap this text with a container widget because I want to give this alignment and padding together I can wrap it with container and I can give this alignment alignment off that should be bottom right because I want to actually position this at the bottom some somewhere right here when we have our second section the bottom for this widget is going to be somewhere around here okay so let's give this padding as well Edge insets of all let's give this 16. I can save it as you can see it's positioned at the right side let's set it let's make it this const okay let's make this text style const as well just like that so now sometimes the output might be long and multi-line okay I'll show you what I mean actually so if we give this a lot of zeros just like that it will actually go to this kind of to new line as you can see just like this if we have uh the result that is long and multi-line it might actually be uh it might actually overflow we want to avoid from that kind of issue and we want to make this output section to be scrollable okay for that we can actually wrap our widget with a scroll widget and that is single child scroll View just like that and if you are using uh scroll scroll view widget you want to wrap your widget with uh expanded or flexible because this actually requires some size when it's used inside column or row okay you can wrap it with Widget and that is going to be expanded just like that okay and also we want to we want our output area to take up as much space as possible so we can remove unnecessary zeros just like that now we are actually done with output section and we can move to button section for our button section I want to use wrap widget because this also enables us to have multiple widgets inside One widget so now I want to create a new file inside which we will have a new class which has has all of our operands and numbers okay that will actually make it easier for us to use any operand or any number whenever we need them instead of using like multiply cyan as a string we can actually uh grab it from that class so here I'll come inside to The Sleep folder inside that let's create a file with the name of button values dot Dart just like that and here I already created the class I'll copy it from my notes just like that I copy it and paste it here and now I'll explain it so here as you can see this is a ptn class and inside that we have all of our operands divide multiply add subtract all of them and numbers as well this will be our button values and here is a list of button values and these are actually ordered at the correct order for our exact use case now you'll actually see what I mean when we display them here on the UI I can save it and I can close this file so here we can use our BTN class and BTN dot button values and this is a list this is coming from here and we can actually mapped through that and for each value here that coming from this button values list we can create a new widget okay so for now we can uh return our method we'll create a new method the name of the method will be build button okay and we pass our value to that method so let's actually change this to list because this is just iterable when we map through it and return values it will be iterable not list but these children actually accepts list only so now we need to create our build button method and I'll come down here and here I'll create a new method or function and from this I'll return a widget so for now let's return text so that we can see what we are uh returning from this and if I save it as you can see at the bottom we have this list of string button values all of them are stacked together at the bottom so now let's design it a little bit so that we can see them properly so let's wrap this build button with a sized box let's give it as give each button a size sized box just like that and save it and we can give this first width not like that with and height okay so both of these properties is going to be dynamic so I actually get a screen size first of all because I want to make the button value to be responsive not better value button size to be responsive based on the UI so we can actually get screen size by using media query just like that media query just like that okay and off context and size this will give us screen size okay now we can actually not screen but size we can use this screen size whenever we need them so first of all we we use it here let's go inside Dot uh with screen with and I want to place four buttons per row okay I can divide it and for the screen height I'll use screens uh screen size width but I want to divide it by five not four okay so as you can see we have screen just like this now we can start designing each of our buttons before moving on to that I have one quick question for you as a challenge here you can see this zero is displayed at the top right but if you come up here we actually set the alignment to the bottom right why isn't this zero being displayed at the bottom right but here because this section is taking up this whole space and this is the height of it what we wanted was to display this zero here at the bottom right why is this the case please try to answer this question in the comment section pause the video write your comment before I'll show you the exact answer I hope you figured that out pretty easily so the reason is because we have this reverse property of this single chart scroll wheel if we set this to true and if I save it now we have this zero that is displayed at the bottom right so by default this single child scroll view actually starts to scroll uh from Top okay and the children the scroll view starts from top to bottom and if you set this reverse to true it starts from bottom to top that is the theory here that is why we have this zero that is displayed at the top right okay now we are done with it and we can actually come here build button method and it's actually here created so I want to make this just like that and now we can actually design our buttons first let's wrap our text with Center widget because I want to make each value to be centered wrap it with Center if I save it now each value each string value is centered at the center of each button so let's wrap this with Inkwell because we want to make the button to be tappable that is the whole purpose of button having button so let's use on tap and for the on Tab we want to use just empty method for now and let's wrap this Inkwell with material widget to give this some styling and have that Splash effect properly as well so for that we use shape property of material widget and this takes uh outline input border and this outline input border have both the radius property so for Border radius I want to use border radius circular and the value will be 100. if I save it now we have buttons that are rounded just like that and have some border as well let's change border color to white actually Border Side and for the Border Side it has a color property and I want to use a white color with a specific shade and that is colors white of 24. this is the exact color I want to use and make it const now we have buttons If we tap on them you can see that that's what that's not what we want we want to make this Splash effect not to go out of this circular border okay for that we this material has a clip property clip Behavior property and we can set this clip to hard Edge just like that if I save it now if I tap on it you can see each button the splash effect is not going outside the this border so next thing what we want to do is to wrap this material up with padding because we want to make each button to be separate from each other to have some space between them so we can wrap it with padding and for the padding I can give I think four should be enough just like that yeah four is enough and now last thing is actually let's give specific buttons specific colors okay we want the group group buttons with different colors so first of all uh let's come here which is set color and for the color we want to give color based on the this value that is coming to this button the first one will be this two delete and clear buttons so I can have list and I can use BTN class the one we created earlier and I can use delete and the next one BTN dot clear this one this is clear and if you want to see what this is actually if you forgot that yeah yeah this one clear delete all of them we we can actually easily use it with BTN dot clear delete and things like that okay that's why we created this vtn class so now I can say dot contains value and now I'm checking if this value is equal to one of this then I want to set the if that's the case I want to set the color colors uh let's let me check my color actually I I Define it the colors here so button border I set that one delete and clear and that's going to be blue gray okay this is the color I want to use let me put it somewhere here blue gray right blue gray else I have another condition and now I set this two of them to blue gray and I want to set uh these operands this this ones to a different color so next one I want to check if the value is equal to one of these so I'll create another list and this list is going to be BTN dot the first one will be uh percent but if this is percentage and the next one BTN dot if this is uh multiply right and the next one let me save it like that so that you can see it properly so this is the next one if this is percentage if this is multiply and copy paste and next one if this is uh add right and copy paste again if this is subtract and one of them and if this is divide as well we want to consider divide and the last one is going to be uh if that is actually calculate okay that's this calculate is equal to that equal sign okay and Dot contains if that contains a value and this is button value coming from that list of button values if that's the case we want to set the color here as you can see I said operands that is going to be orange I want to set this to Orange in other cases so now we have now our buttons and these numbers the left uh what is it the rest of the buttons are just numbers so numbers are going to be just black 87. okay that's the last case I can close this now if I save it now we have buttons you can see that are styled properly so instead of putting all of them here I want to copy all of it copy it and come down here and here I want to create a new function that returns color get BTN color okay and we pass that value button value and we can actually return this just like that okay now we have this condition and we can use instead of all of this we can use get BTN color here get button color and we pass our value and if we save it we have this the same functionality now there is something we do not want here we have some empty space we don't want that we actually want to uh fill up this space as well so for that I want to make this 0 bigger I want to take this I want this 0 to take up at two button spaces okay so for it we can come up here and change this button size we'll we'll put some condition here for the width okay let's wrap it with this one and I can check if this value right uh value equal to BTN dot uh what was that that was calc zero right and number zero if this is the case then I want to set this screen size width of I want to set it width divided by two otherwise this will be similar to other buttons If I save it now we have 0 that is set to this one okay the last thing is coming to here and we want to style this one as well this text and button text as well so for it we can change we can give style and text Style off so text style let's give this font weight font weight of bold okay I can save that and let's give this font size as well I think we can make the font size little bit bigger like 24 probably let's check it okay this looks fine now and we can make this cost it's like that now we are done with button button design as well we can move on to functionality before we move on to functionalities Let's actually change these button values one of them should be five right I didn't notice it maybe you have not sit already let's actually change this to five we come here to buttonvallis.dart file and here I want to change this and five to five okay this number five should be number five if I save it this should be five as you can see we have the the number buttons with the correct values I can close the file I can close the sidebar now what I want to do is come up here if you remember we had this hard-coded value of zero and it's showing up here we don't want this uh this to be a hard-coded value we want to make it Dynamic we want to change it when we actually deal with these buttons right so we come up here and just about this build function we want to create three variables the first one will be number one and it's going to be empty string for now and I'll copy paste a couple of times and second one is going to be operand and third one is going to be number two so basically the idea here is that the number one always have the values of dot or 0 to 9 okay so this is going to be the values this number or one variable is going to have and for number two it's going to be the same but this one for operant it is going to have the values of plus minus my multiply and then divide okay these are the four four values this operand will have and I come here down here and I'll change this to my variable so first of all I want to put my number one variable and second one the the middle one will be our operand and the third one the last one is going to be number two all right so basically this is the left side of our equation and this is the this equal the operator the operand that is multiply divide minus or plus and this number two is going to be the right side of our equation okay and now in this case I want to check if this all of these three variables is empty if that's the case we want to show something here right so let's check it if that is empty if the resulting string value is empty then we want to show just zero or else if this is not empty we want to actually display this string as it is okay if I save it nothing will change because our variable values are empty that's why we have zero if you come up here we have empty variables so now I can come down here inside our build button function we have this Inkwell and this actually every time we tap on any button this ink well inkwell's on tap property is going to be called okay so here I want to assign a arrow function function and I'll create my own function and assign it to this on Tab method of Inkwell so the name of the function on BTN tab okay and I want to pass a value of the button that is tapped to this on on BTN tab function so the value this value is coming from here okay so I come down here let me actually separate my functions just like that and I'll create a new function in the name of the function as I defined it before it's going to be on be on BTN tab okay and we receive our value that is coming to this function and here we are going to deal with each button tab first of all let's actually try to show up something here when the button is pressed so what we can do is we can have we can actually grab our number one variable and we can actually add the value to this uh number one so I'll set the state and inside this state I'll actually keep appending this coming value to this number one and this number one if you remember we defined it about okay now if I actually tap on any button it is going to update this value you can see that every button's value is showing up here even delete and clear everything so we don't want to show up everything here as the output we want to deal with some buttons differently right for example we want to delete or clear things or we want to calculate and something like that by checking which button is pressed we need to assign that value that coming button value to one of our three variables if you remember we have three variables right that is number one and the second one is operant just like that operand and third one is number two right so we have these three variables and based on which button is pressed we need to create a proper equation just like that so let's say let's say number one and then operand and then number two so this should look something like let's say just like that and let's say plus and number not number one but this should be number two number two should be something like I don't know just like that okay we need to have some some equation looking like this all right so for that we can actually first of all we need to check if the tapped button is not a number user Taps on one of these buttons we can actually deal with it inside this if statement all right so for that I'll check first of all if value not equal to is not equal to BTN dot okay I want to check if that's not DOT if that's not DOT and also I want to check if that press button is actually not a number so for that we can actually use int triparts we try to parse that value into integer if it's possible then that's a number if not this tripart returns null so we pass our value and we check if that is null if this is the case then this is not a number so what we can do is uh we can actually deal with a non-number button value inside our if statement so here we need to we need to have another if statement so for this one for this if statement we need to check if our operand is not empty right because we are not dealing with a number we are dealing with a some some of these buttons that's why we need to check if our operand is not empty and also we need to check if number two number two is not empty all right if this is the case if our operand is not empty and then if our number two is not empty and that means we already have this equation proper equation and we can calculate it and before actually appending that uh operand we want to calculate it and then append that value to our operand not a band but a sign all right so here what I want to do I'll just make it to do for now and calculate uh calculate the equation before okay assigning new operand something like this so we do it here and after that what we want to do is we need to assign that operand here that new value will be our new operand okay so now you might be thinking how about this delete clear and other percentage buttons so yeah we are going to consider that once as well but for now we can assume that user tapped on only one of these four okay one of uh one of these four buttons or this uh button all right and we'll deal with this equal and percentage and delete clear buttons after that we are done with non-number character now what we want to do we want to check if our number we want to check which variable is empty based on that we can assign that value to the to to our certain variable okay first of all I want to check if our number one variable is empty if that's the case first I need to check if operant is empty as well because let's say let's close this one body right so this means if number one is empty and operand is empty this means we have uh number one this empty or our operand is also empty and here number two right so this is the case but in this case our number one could be could not be empty that that can be like they can be number but our operand might be empty yeah if that's the case we can keep assigning the new number to this okay just like that if there is a operand here that means we cannot assign any number to our number one variable so this is the case so let me actually remove this and what I want to do here first of all we need to actually deal with the Dot case here up here we checked if our value is not equal to dot Okay then if that's the if this value equals to dot this means this if still statement is not going to run it's not going to go inside this if statement and it comes to here else if in that case we are not checking if that's not DOT right so here we need to deal with that so for that I'll check if value equal to BTN dot okay if that's the case and also I want to check if our number number one contains contains BTN BTN dot okay I want to check that here so if that's the case that's the case let's say uh now we have that number one right number one might be something like uh 1.2 and this might be the case right if that's the case if that's the case we want we don't want to append another dot to this double value we just want to return from this okay and then the next case if let's actually copy paste this and change it okay it's going to be similar so we check if button equal to dot again and we check for uh number one let's check it first of all if number one is empty let's check that one or we'll check if a number one number one equal to BTN um dot all right we want to check that here if the tapped button is Dot and let's actually click wrap this with braces just like that if number one is empty or number one equal to dot if that's the case what we want to do is in this case our number one right number one might be empty or that could be zero is that right yeah not dot but this should be n zero if number one equals to zero okay this is the case here if that's the case what we want to do is change our value the coming value to zero dot so the idea here is that sometimes the output might be empty yes there is nothing here or this could be zero right in that case user the first pressed button can be this dot if that's the case we want to change that zero dot because we don't want user to see a number something like this okay we want to uh not something just dot okay that's not what we want we want what we want to do is zero Dot and we can keep assigning all the numbers just like that that's the case okay all right I hope you get the idea so we deal with it so now we are done with number one and we can so at the end of this elsif statement what we want to do after checking all these two if statements we can actually assign our number one a value of that coming value right just like that now we are done with number one case Okay number one so if this knot this is not the case we want to deal with a number two case as well so for that I can just copy paste all of this and I can come down here and paste it another else if statement so for this one what we want to do is check number two if number two is not empty if that's the case we want to check if operant is not empty as well because if that's the case it should actually assign the value to our number one right so we check that if number two is empty or operant is not empty that's the case again we deal with a Dot case and here what we want to do change this to number two and then we want to change this number two again we want to change this number two right and this one stays the same and we change this into number two and this 2 is going to be alike all right so this is the idea and at the end of it after checking all of it we don't want this one we can actually remove it and we can just call that set state after actually saving it we can check our conditions we cannot delete or clear anything yet so that's why I just restart it okay now let's try to check it so if I tap on let's say 7 8 just like that as you can see it's it keeps a pen it keeps appending the number to our number one variable and let's check it that that check if that that's actually working I want to tap on this one you can see it's working right so we can actually uh tap another button another number you can see that this is actually a pending right I hope this is not too confusing for you so actually I want to write some comments for you so that this is actually clear for you here we can uh check first of all on this one this is actually operant operand pressed right this is operand pressed when this goes into this one this means the operand is pressed so we need to check if is operant and not dot okay not like that just like this not DOT okay this is checking for that one and for elsif uh I'll do it something like this and assign value to number one variable all right this is for that case and here we are checking I'll say this is example for this one check if value is just like that okay dot and we can actually make it just like this we check that one and for this one this is understandable I put it here and we can make this example as well um and for the down part for number two uh it is similar I'll put that one as well as a comment so this is number two all right and check it and this is Dot case as well just like this okay now I think this is kind of a little bit clearer than before and here for calculate case we actually put our function calculate function here when we are when we created that function all right we are actually done with numbers all of numbers and Dot as well okay we dealt with Dot case with all of black buttons and black buttons are complete when user Taps on them they work properly and these four operators as well right multiply divide minus and subtract plus right this this four and all of these black buttons now we need to deal with delete clear percentage and calculate so let's do that so first of all I actually want to uh take all of this function these functions all of them here okay I want to copy them and I'll create a new function here and the name of the function will be append okay append let's say append value all right and it will take value as parameter let's make this string just like this and I'll put it I'll paste it here the same functions but I put it here inside one new function okay and we can make it just like that a pence value to the end let's say so this one on BTN tab will have other conditions first of all let's put our append value here so that it works as expected now let's check if this delete button is pressed for that we can check if value equal to BTN delete right if that's the case we want to deal with this delete case so I can create a new function the name of the function will be delete and I can return from that once this delete button is pressed we can delete one from this value and return we don't want to do anything right so I'll create this function down here and this is going to delete one I'll write a comment delete one from the end just like that and it's void function we can deal with this delete with just with if statements first we need to check some conditions before we actually delete it let's check if number two is empty it's not empty actually let's check it if number two is not empty we want to delete from this variable number two all right so for that we can save a number two equal to number number two dot substring we can get substring and for the start it will start from the beginning and for the end we can use the length of this number two dot length minus one all right this is going to subtract our variable let's say we have just like this right and when we assign this when we use the substring starting from zero and ending at the right before the end this will look our new number will look something like one two three two okay this one three will be gone so this is the case now if this is not the case if number two is empty then we need to check another case else if now we want to check if our operand operand is not empty we want to check that one if operant is not empty we just remove the operand okay operand equals to just empty string and the last case else if okay else if this is going to be for number one and we want to check number one number one is not empty if that's the case I'll just copy this number two and come down here and change this to number one number one and then number one just like this all right so basically we want to keep checking from the from the end this is number two we want to check it if this this is empty we want to check operand if that's empty we want to check number one this one all right after checking all of it we actually remove one number one character from this output so then at the end we just set State we call this and that's it now we are done with delete all right now I try to actually tap on delete okay as you can see now we are deleting just like this that's it now we are done with delete and the next case I want to check if tapped button uh if that value is equal to BTN dot clear okay I want to check this if this is clear if this CL this clear button is pressed so in that case I'll create another function that will be clear all and I will return again because after clear everything we don't want to do anything else we just return from this function so I come down here I will separate my function like before and clears all let's say output okay this is void function again clear all here we can deal with this clear all function pretty easily we call set State and we set all of our variables to empty string okay copy paste couple of times and then this is going to be operand operand will be empty and number two will be empty as well okay I save it after saving it I can come here I can tap on clear now you can see everything is gone all of our numbers two operand and a number one number to an operand variables are empty okay now we have only uh two cases left one is this percentage if we tap on it it will just put it here because we did not check for this condition and for this equality operator as well it just puts it here we don't want that okay so we want to check for these conditions first let's actually check for percentage if value equal to BTN dot percentage if that's the case we want to create a new function the name of the function will be convert to percentage just like this and we want to return from the function again now I will come down here and I'll separate my function like before and converts output to percentage and this is void function the name of the function convert the percentage and then we can deal with this convert to percentage with some conditions as well first of all let's check let's check if uh a number number one is not empty let's check for that and then we want to check operand is not empty and the third one will be number two if number two is not empty we want to check these ones because if all of these variables are not empty that means we already have a equation example could be something like 40 plus plus something like this right we already have an approper equation before converting this to percentage we want to calculate it so that's why here I'll write a comment calculate before uh conversion okay and here will be to do our to-do right because we did not create our calculate function yet we do that one we calculated and we did not return it we do not return from here yet because after calculating we still want to convert that into percentage right so that's why we check it if the next condition uh if it does not go into this if statement then we want to check another condition that is operand right if operant is not empty in this case if operand is not empty and that means the last one if I delete it we have something like this and it looks something like this all right our output or input ends with operant we don't want to convert this into uh what is it percentage right so we need to deal with this one as well because it it is going to throw an error so if that's the case cannot be converted right so that's why we just return from it if this is the case and at last after passing all of these conditions and checking uh changing our value to a proper one we can actually get our number right final of a number and this is going to be number one uh in our calculate function after calculating everything we always want to set that calculated result into our number one number one value all right that's why we always deal with this number one value inside this converter percentage let's say I'll show you an example if we calculate it we have this result right final result and it's going to be something like number one and then operand number two right this is the case we are dealing with this and then I come down here so this is our equation after that we are getting our number again and we are assigning the result to that this just like this all right so every time we calculate it this result will be assigned to number one variable the one we created at the beginning of this functionality section so that's the idea so that's why we always grab number one here and uh before converting to percentage we want to change the string number into uh actual number double or integer in this case we want to change it to double we use double parse so we have this number variable that is changed to double and now we can set our state so inside this set State what we can do is number one number one is going to be equal to our number let's actually change it convert it first we want to convert that number 1 divided by 100 something like this all right we want to do that not number one but but this number this one this is double and we want to divide it by 100 in this case we converted the number to percentage right and we want to uh reset our operand first that needs to be reset as well operand and then number two needs to be reset as well just like this after that at the end of conversion we have we have a variable with we have the variable number one with the value and that was of the two variables it will be empty again all right now we are done with convert the percentage okay so I can actually remove this once convert to percentage right it's the case so I can delete it for now we can actually convert numbers to percentage if I try this let me try it you can see it's converting this to percentage I can clear it let's say we have this number if I converted you can see this is converting it to percentage so the final button is this equal button okay we are going to deal with this equal button just under this change to or is it on under percentage so let's check it if the button value the passing button value equal to BTN dot calculate right this calculate is if we come here is equal to this equal button all right so if that's the case we want to calculate our result calculate a new function I want to create a new function and after calculating it I will return from that because after calculating we don't we don't want to do anything right so we can create a new function down here again come down here and I'll separate my function like others and color correlates the result all right so it's going to be a void function again and then the name of the function is calculate and then we can have some conditions here so that we can calculate the result properly in order to calculate our result we need to have our three variables with proper values because we want to have a proper statement so that we can calculate our result right so that's why we need to check each of our variables for their value first of all we will check if number one is empty if that is empty we just return from this function because we cannot calculate our result if let's copy paste this if statement a couple of times if operant if operant is empty we return from this function again we cannot calculate it then for number two we do the same if here we can pass from these three conditions then we can go ahead calculate our result so now I want to create three variables first one is our num number one variables a double version so num1 equal to double parse double parse we can pass our number one variable so this is going to be uh the Double version of our number one variable okay and we'll do the same for number two this is going to be num two so number two right and then the last one will be the third variable is going to be our result variable so this will keep track of our result so that's it so we can make this two variables uh final as well just like this now just under result variable I can call I can create switch statements right so in the switch statement what I want to do is first of all pass our operand so I'll pass our operand and check if that operand first of all is uh BTN dot add if that's add we need to add our two numbers so we can add our num num1 plus num2 right and we need to assign that to our result variable just like this then if that's not at we'll check for subtract if that is subtract we just subtract our number two from number one and for the third case we will check for multiply if that is multiply then we can actually multiply these two numbers and for the last case that is divide for divide we just divide our two numbers just like this and for default we can leave it as it is because we are we dealt with all of four operands so then outside this switch statement what I want to do I want to call set state so inside this set State I will assign result variable to my number one variable okay use result we cannot assign result directly to our number one because this is double and this is a string so that's why we can wrap it with double quotes just like this now we have a string version of our result and then there is one case we need to consider so let me clear this let's say sometimes when you calculate your your result might look like something like this and in this case we want to show the whole number not the not the point part right that's why we can remove this dot zero so for that we will check if our number one ends with if it ends with DOT zero then we will modify our number one variable so we can use we can grab our number one and assign number one substring start from zero and end with a number one length minus two okay so basically this is going to remove the last two characters at the end of our stream so that is the case and then after that we outside of this if statement we want to reset our operand and number two variables we can make them just empty string just like this and this one is going to be number two if you remember I mentioned it earlier that every time we calculate our result we always assign our variable to our number other value result value to our number one variable because we want to make a num operand and number two variables ready for another equation or another statement user might want to let's say have this result and might want to keep calculating again pressing on this one and keep going just like that right if if that's the case we want to make our variables ready for new values so that's the idea so oops I can save it now and then let's actually hot restart it so that everything works just fine Okay so now let's try it if we do that that's minus two just like that and you can divide it by five let's say okay so multiply it by five not bad okay I hope that what is it the result is correct I try to consider everything uh I could think of all right so if there is a bug or anything but please try to fix it and write your comment in the comment section so there is two more cases we need to consider here the last one if you remember we left uh two to Do's so the first one was inside of a converter percentage right if we come into that function here before converting our output or input into percentage we need to check if that's a proper statement something similar to that right if there is already statement let's say just like that we want to calculate it first and then convert it to a percentage that's why if this condition is true then we need to call our calculate function here just like this all right I save it now if I try to tap on this percentage it calculates the result and then creates a percentage okay and there is another one to do left so it was in append value here if you remember if this condition is true that means user tapped on operand right and then inside that we need to check if there is already an operand meaning if there is already a proper statement something like that right if that's the case we want to uh what is it calculate our result inside here inside this to do right calculate our calculative result and then we can assign that operand a new value the value that passed to to our function okay so here I can save it now if I try to let's say tap on operand again we already have this one operand I can tap on this operand if I tap on it it calculates the result and then it will put the operand at the end again and we can keep calculating more results just like that and we can tap on this and that is our result all right you can see that you can improve this calculator way more than this for example there is a two long decimal point here you can make it shorter and also uh it doesn't work with negative numbers yet so you can actually create a function to work with negative numbers as well so for all of these functions you can find the source code that you can find the link in the description I leave it there I hope this video is useful for you if that's the case smash that like button and consider subscribing for more content like this see you in the next video

Channel: Shohruh AK

Views: 16,801

Keywords: flutter, flutter dev, coding, programming, mobile development, android app, ios app, web app, web development, frontend developper, mobile applications, flutter coding, how to code, how to create flutter, flutter widget, flutter functions, cross-platform application, flutter website, javascript, html, css, python, docker, react js, dart, dart and flutter, deploy flutter, flutter google play, developper life, Shohruh AK, shoha dev, calculator app, flutter calculator

Id: PswYuVIltDw

Length: 63min 21sec (3801 seconds)

Published: Mon Jun 05 2023