Flutter Coding Challenge: Building a Calculator App

[Music] hello welcome to my youtube channel I am some earth and I'm back with another video for you guys this video is going to be a little bit different because this video is not about ionic or angular in this video we are going to try out something new and the new thing that we are going to try out today is flutter flutter is a UI framework by Google which is gaining a lot of popularity these days as it allows developers to develop apps for Android and iOS using a single codebase and to develop apps in flutter you'll be writing your code in a programming language called dart so if you have worked with any object-oriented programming language like C++ C sharp or Java then you should not face any problems working with dart because the basics are pretty much the same there are a lot of similarities in the syntax is as well and moreover you don't need to be an expert in Dart to get started with flutter so in this coding challenge I have decided that I'll try to create a simple calculator application using flutter so I have already setup the flutter SDK on my machine and now I am all set to create a new flutter application and start coding you can follow along if you want to so the first thing I'll do is run the command flutter dr. which will tell me if my flutter SDK is set up correctly or not so it might take a few moments to give me some results and you can see that the doctor found two issues on my machine and these two issues are not going to bother me because one of them is about iOS toolchain and currently I am just trying to run this application on Android and the second one is a generic issue which is because I do not have any devices connected to my system right now so that's okay now I can just go ahead and create a new flutter application oil is go ahead and type in floater create and then the name of the application keep in mind that you cannot have uppercase characters or special symbols in your application name so if I use the name calculator - app it is going to give me an error so instead I'll replace - with an underscore then it will accept and create a new application for me so as you can see that the application creation process does not take very long it just creates some files and then it attempts to get some flatter packages this is like npm install if you are coming from a Java Script background so let's just go ahead and wait for it to complete and now that it has completed let's open this project folder in Visual Studio code and get coding so now the project is opened in Visual Studio code I'll go to the lip folder and open the main door dart file which is the only file that we'll be working on today so as you can see there is a lot of boilerplate code inside this file and there are a lot of comments as well so I will just go ahead and remove the comments first and I'll reformat the file and now the code is a lot smaller in size so if you have a look from the top there is a class called my app which extends the stateless widget class and it has a build function inside it which returns a material app the material app has a few properties there is a home property that we are concerned about and the home property takes in an object of type my home page which takes in a title as a parameter this my new home page class is defined just below this class and it extends the class called stateful widget all flitter applications are build with widgets so everything you see in a flatter application is a widget there are two kinds of widget stateless widgets and stateful widgets as of now just understand that stateless widgets are kind of static and cannot change their state over time while stateful widgets can straight full widgets can change their state in response to a user's action or any event in your application so just below the class my home page which extends stateful widget I have another class underscore my home page state which extends a state class and this is where we will be working for the rest of this video so I'll just go ahead and remove everything from this class [Music] and in the build function I am returning a scaffold we'll discuss what a scaffold is in a few moments but for now let's square it and remove everything from the body object and I'll just delete everything from here and now I'd need to pass in something to this body so I'll just type in new container and that's it so now if I save and if I run this application I should get to see my app you need to install a flutter extension for visual studio code to get the same options that I have here and then you can run your application from within visual studio code as well so in a few moments your application will be up and running so now you can see that I have my app it has a title flutter demo home page on the app bar and this is because I have an app bar inside my scaffold so scaffold is a widget that contains basic UI widgets like a bar floating action buttons body menus and a lot more stuff okay so in the app bar you can see that I am receiving a parameter called widget or title which I am passing from my my app stateless widget and if I go ahead and change this parameter and I will change it to calculator and if I hit the refresh button on the debugger you can see that the title changes I can also play around with colors so if I change the color to orange the application color changes let's change it back to blue for now and now I'll come to my container and start building the UI for our calculator app so I'll start by creating a column because I want to have a column of widgets and all these widgets will be aligned vertically and the column will be a child of our container the column can have more than one children so it contains a property called children which is an array of widgets so first of all I'll define a new text widget and I'll pass in the text zero as a parameter to it let's save and see what we get so you can see that I get the text zero in my app now let's put a comma and define another widget which will be displayed just below my text widget because we are working in a column so I'll just go ahead and create a button and I'll just go ahead and choose material button for now we'll change it if we don't like it and inside my button I'll define a child property mostly all widgets in flutter have a child property so I'll define its value as new text widget and again I will pass in some text here well this word in pass in one as string here so if you save and refresh your application you can see that you get a button although you cannot click on it so you need to define a property called unpressed on all your buttons to make them work on pressed should be set equal to a function so for now I'll just assign a function that does nothing to on pressed property and now you can see that I can tap on the button let's have a look at few more properties on material button so you can define a color and since we are working in an object-oriented environment you have to select a color from the colors class so you can type in colors and then if you put a dot you will get a lot of options to choose from and I'll also set a text color and I'll set it to white so now if i refresh you can see that the color of the button changed now since we want to have multiple buttons we need to put this button inside another widget and to do that in flatter you have a very handy option which lets you wrap this current widget inside another widget so just click on this visits name and you get a bulb icon in visual studio code and even an Android studio and if you click on it and select wrap the new widget it will wrap your code in another visit so I'll just name this visit as expanded and what expanded does it makes sure that it's child take up all the available space so since we are working in a column the button will now take up all the available vertical space so now I'll wrap this expanded in a new row and the row widget has no property called child it has a property called children which is an array of widgets just like the column widget so I'll wrap everything inside an array and now if I save and refresh you can see that the button takes up all the available space horizontally now between my text widget and my row visit I'll put in another widget and it will be an expanded widget which will just contain a divider so what this will do this will take up all the available vertical space in our application and we'll make sure that the text widget is displayed to the top while the button which is inside a row is displayed towards the bottom of the page so the expanded widget has taken up all the available space in the middle of the application page because we are in a row and it has a children property we can replicate the expanded widget a number of times so let's just copy this and paste it a number of times and I will refresh the application and now you can see that I get three buttons and the width of each of these buttons is reduced to one-third of the screens width this is because we have used and expanded this is because we have used an expanded widget it takes up all the available space so all the three expanded widgets are dividing the space amongst them if I keep on adding new expanded widgets the code will become lengthy and ugly pretty soon so I'll just copy this expanded widget and I'll create a new function let's call this function build button you can call it whatever you want it will return a widget and inside this function I'll paste in the code that I just copied and I'll return my new expanded widget and now I'll go back to my row and I'll replace all this code with a call to my function so instead of having all these lines of code all I can do now is call build button function so I can do this a number of times let's go ahead and do this three more times and now if I save and refresh the application the code works just perfect and now I have four buttons so now all I have to do is use the build button function to have a button and I can do it as many times as I want now since we have a row let's wrap this row in a column widget so that we can have multiple rows of buttons the column will again have a property called children and I will replicate my row a number of times inside this column children property so let me just go ahead and copy this a number of times and paste it so that we can have a number of rows here so now if I save and refresh the application you can see that I have a grid of buttons and let me just go ahead and make sure that the buttons look a little bit better so I'll change the button type to outline button and I will remove the colors and text color property now if I save and refresh the buttons look a lot nicer while we are at it we can also set up some padding to our buttons and can also increase the font size of our buttons so I'll just go ahead and add a padding and the padding property takes in a widget called agent sets and on the edge inserts widget you can call the all function and pass in 24.0 which will apply a padding of 24 device independent pixels on all sides so now you can see that the view is updated and our buttons are pretty big in size so in the text widget what I'll do first is retrieve a parameter called button text and I'll just replace this static text with the value of button text and now what I can do is just pass in a string from all my build button function calls so I'll just do that I'll pass in 7 8 9 and so on so I'll do this with all my build button function calls let's refresh and you can see that I now have a calculator like UI while we are at it let's change the size of the text on my buttons and inside the text widget I can also specify a style which takes in a text style widget and here you can specify properties like font size and font weight let's refresh and I think it's too big so I'll just go ahead and reduce the size to 20 instead of 24 let's save and refresh again and I think it's fine now so now the buttons are okay we have a lot of patterns that we have to work with so now it's time to make the first child in our column which is a text widget look a little bit better so this text widget will be used to display the results of our calculation and as the user presses any buttons this text widget will update accordingly so it is just like a normal digital calculator so the size of the text widget should be a little bit larger and it should be right aligned so the first thing I'll do is wrap this text widget with a container and that's because a container can have padding so I'll just go ahead and add the style property to my text and I'll use the textile widget again and I'll specify a font size of around 36 device-independent pixels and a font weight of bold let's save this okay looks good let us increase the font size further to 48 and I think it looks better now I'll add some padding and I'll use the edge inserts widget again and this time I'll use the symmetric function and this allows me to define padding vertically and horizontally so on the vertical axis which means that on top and bottom I'll have a padding of 24 device independent pixels while horizontally which means on left and right which means on left and right I'll have a padding of 12 device-independent pixel let's save and refresh looks better now all I have to do is align this text to the right so I'll use the alignment property on my container and I will define alignment equal to alignment dot Center right let's refresh and now the text is aligned to the right before concluding let's just go ahead and create a variable called output in my state class and I'll initialize its value equal to zero and now instead of having the static text 0 in my text widget I'll have output so this will allow me to have updated values when I make calculations while implementing interactivity to our buttons so I'll just have to update the value of the output variable and the value in our text widget will be updated so our UI is pretty much ready now we can keep playing with it as long as we do not get what we want but since we are just trying out our very first flutter application I think this is good so now it's time to get started with adding some interactivity to this calculator and it's buttons so we are back so now it's time to add some interactivity and make this calculator work so you can see that I have an on pressed event which takes in a function inside my button and this is an on press which will be executed for every button corner calculator so inside this function I can write the code that I want to be executed when the button is tabbed so what I'll do is create a function called button pressed and I'll pass in the value of button text to this function and I'll just go ahead and create this function on the top in my class so I'll just create the function button pressed it will receive a parameter of string type and the name of the parameter can be anything let's just keep it button text for now the first thing I'll do is print the value of button text and see if it works so I'll just refresh the application and let's square it and try this out and if I press the button I get an error and I think this is because we are using an arrow function on the button pressed and we are also using a set of curly braces so let me just go ahead and remove curly braces from here and then I think it should work so now I have removed the curly braces let's refresh the application and now if I press any of the buttons on my calculator you can see the inputs logged to the console which is the value of the button text perfect so now we are getting the value of button text in our function so we can use it to carry out operations based on its value before that will declare a few more variables we'll declare a variable called underscore output which will be of the type string and I'll assign its value to 0 as a string this will be the variable that will hold the value of our output until we are ready to update the output in our view and to update the output in our view which means in our text widget we will have to assign the value of underscore output to the actual output variable so the underscore output variable is a kind of C to output variable other than that I have a number one variable which is of the type double an enum 2 variable which is also of the type double since we are only caring about binary operations num1 and num2 will store the two numbers and the operand variable the value of the operand so the operand can either be the plus symbol the minus symbol X or the forward slash and based on the value of the operand we will carry out a mathematical operation on num1 and num2 so let's go ahead and get started the first thing I'll do is check if button text is equal to clear and if button text is equal to clear it means that the user has pressed the Clear button in that case I'll have to do nothing I'll just reset the values of all the variables so I'll reset the value of C to output I'll reset the value of num1 and num2 and also reset the value of operand then i'll use an else and I'll check if the value of button text is equal to any of my operands so if the value of button text is equal to a plus symbol minus symbol X which is for multiplication and a forward slash which is for division so if the value of button text is equal to any of these symbols it means that the user has entered a number and now they are trying to enter another number so in that case whatever is the value inside our output variable will store that in num1 and we'll update the value of operand as well since num1 is of double type and our output variable is of string type we will have to pass output as a double and then store it inside num1 so I'll use double dot parse function and I will pass output inside this function next I'll just update the value of my operand equal to the button text and lastly I'll update the value of C to output to be equal to 0 which means that as soon as the user presses the button for any operand the calculators value will be reset to 0 which is perfect now we'll use this again and I'll check if the value of button text is equal to a dot which actually means if the user is trying to add a decimal so if the user is trying to add a decimal we need to check if there a decimal already in our input or not so we'll use the contains function on our c2 output and if the cito output already contains a dot in that case we will just print a message already contains a decimal and will return in the s-block we will just append the decimal to our c2 output perfect now we will write another else and this time we'll just check if the value of button text is equal to the equal symbol so here we'll be doing all the calculations the first thing we'll do is retrieve the value of output and save it inside num2 so we'll type in num to equal double dot parse and I'll pass in the value of output to this function then based on the value of operand I'll perform calculations on num1 and num2 so if operand is equal to plus symbol then I'll assign the value of C to output to be equal to num 1 plus num2 and then I will convert them to string I'll do this for all the four operands I'll just change the symbols and mathematical calculations here and lastly I will reset the value of num1 and num2 to be equal to zero and I will also reset the value of C to output to be zero and now just the numerical buttons are left so we'll just type in an S here and in that case we will just append the value of button text to our output finally we are just going to print the value of C to output and I'll use the set state function to update the value in our application so I'll set the value of C to output equal to the value of output inside the set state function which will make sure that the application state is updated accordingly now since Sedo output is a string it can contain leading zeros so to remove any leading zeros I'll pass zero output as a double and then I'll convert it back to a string and I'll restrict its precision to two decimal places so I'll use the function to string as fixed and I'll pass in two as a parameter let's save our file and refresh the application so I'll just try to add two and five and as soon as I press equal the output is zero and this is because I think I have made an error somewhere okay so when the user presses equal button then I have said C to output to be zero while what I need to do is reset the value of operand so I'll just go ahead and fix that so I'll set the value of operand to be a blank string let's save the file and refresh the application so I'll again try to add two and five and I get seven I can keep on doing this and I'll get results and if I press the Clear button it should clear the output but the output is not being cleared and this is because I must have made some mistake in the if block for the Clear button and this is because okay I do not have to read declare all these variables I just have to reinitialize them so I'll just remove the types from each of these variables and now if I save the application and refresh it the Clear button also works so now our calculator is working we can do a lot more and we can keep working on this project to make it more sophisticated and implement more functionalities but since this is our very first application in flutter I think we have got pretty good results and I'm happy working with fretter I'm glad that I pulled off this coding challenge pretty well if you like this video hit thumbs up if you face any problems let me know in the comments and if you want more videos on flutter let me know in the comments as well thanks for watching

Channel: Samarth Agarwal

Views: 89,507

Keywords: flutter development, flutter sdk, flutter widgets, flutter, calculator, dart, google-flutter, android, ios, cross-platform, mobile apps, flutter app, learn flutter, flutter tutorial, flutter app development, flutter app tutorial, samarth agarwal, samarth flutter

Id: eVG5DkPF5x8

Length: 25min 28sec (1528 seconds)

Published: Sat May 26 2018

Reddit Comments

[u/wil2200]

That was a pretty sweet and simple intro to the basics. New to flutter and dart (but not oop) so hoping this will not take too long to get ramped up on.