How to create a calculator using Flutterflow. No-code/low-code tutorial

okay so good day welcome to my tutorial and today simply put what we are going to be doing is we are going to be creating a calculator now the calculator that we are going to be creating is going to be quite simple and all it's going to do is actually add two numbers so this is a proof of concept as to how it works so as you can see I placed in four here and four here and then when you click on ADD is going to add the two numbers so let's take a look at how we can go about creating this calculator now I am going to be using flat flow flat flow is basically a software that is created to create a lowlevel abstraction of the flatter framework which is created by Google and it allows you to essentially be able to create applications without having to code so as of recently it's become my tool of choice and so that is what I am going to do to sign up for flutter flow all you have to do is come to app. flatter flow.io and you can log in using your Google account and this is the dashboard that you're going to first come to now you're going to click on create new and then what you're going to do is you're going to add in over here the name of the the project so I'm going to put calculator with two RS because I already have one here and then you're simply going to click on create blank it's going to load a little bit and then once this is loaded up you can just click on skip over here these are certain uh configuration settings that you can have for your project but we won't be needing any of that today so here we are this is our blank project and so let's start off with the first step and the first step is going to be to place our widgets into our workspace over here so to place in widgets what you're going to do is you're going to come to the left hand over here to the widget tree and then you are going to select the column that we are going to be placing our widgets in so if you don't know what widgets are widgets are essentially the components that interact within your application uh to bring about you know expected outputs so in our case over here we are going to be placing in two text fields and these are going to be responsible for taking the input into our application so I'm going to place one here and then I am going to duplicate this so that we are going to have two of those and then I'm going to select the first text field and I'm going to add padding which is going to give it a little bit of space there at the top you can click on this icon over here if you would like to know what your your application is going to look like on a real device in real time as you developing so we are going to add those two and then we also going to add in a button so to add in a widget you're going to click on this icon and then you're going to select button and then we are going to add one more widget which is going to be a text widget and this text widget is going to hold our answer so I'm going to click on button I'm going to add some padding at the top so that we're going to have some space there and I'm going to do the same with the text widget so I clicked on it and then I'm going to add padding of 15 and I'm I'm also going to just increase the font size so that it's going to be a little bit more visible now that we have our components let's move on to the second step and the second step is we're going to need to create a variable that will store the answer once we have clicked on this button to calculate it so to add a variable we are simply just going to place in a page State variable so to add a page State variable what you're going to do is you're going to come up here to the top and you're going to click on this so that you can select the root widget so the root widget is basically the widget that houses the entire canvas that you have over here and what you're going to find is you're going to have this icon here on the right hand side which if you hover over it says State Management you're going to click on this and this is is the area where you can create page State variables so page State variables are variables that are only accessible within this page of the application so that is going to be what we are going to use to store our answer we're going to give it a name and the name is going to be answer and the data type is going to be integer and we can give it a default value of zero uh and then we are going to click on confirm so that's the second step we have just created a page State variable for ourselves now what we are going to do is we're going to move on to processing the inputs that are going to be placed into these two text Fields over here so it's usually good practice to change the name of the components that you're working with the widgets so what we are going to do is we're going to click on the first first widget and then we're going to come up here and then I'm going to add a one and click on the tick then the second one I am going to do the same we're going to click up over here I'm going to add a two and then we're going to click on the tick so now this is text field one and this is text field 2 so I'm going to select the button I am going to scroll down over here in the properties panel and then I am going to change the label to add so that it's going to say add over here and now we can configure it to perform the calculations so to do that what you're going to do is you're going to come up over here to the right hand side you're going to click on this mouse button and this is going to open up the action flow editor which you can further click over here and then that's going to open that now inside over here we can set our actions our actions are responsible basic Al for controlling uh the behavior within our application and so what we trying to do is we wants to update the variable that we created over here so that it's going to reflect and store the answer so by default we have zero but of course unless it the calculation warrants it we're not going to be needing zero so you're going to click on ADD action and then so I'm going to go back over over here since this is the screen we are familiar with and I'm going to just delete this so that you remember where we are going to click on ADD action and then here on our right hand side in the search field I am going to search for update and then I'm going to scroll down and under State Management I am going to select update page state so now once you've selected that we can then click on set Fields add fields and then we are going to select the answer that we are trying to update the variable that we trying to update so they're going to ask you for the update type you're going to click on this and then what you're going to select is set value so this reset value which would reset the value back to its default and then there's increments or decrements which would either increase or decrease by a specified amount but what we trying to do is we're trying to set a value and to set the value what we are going to do is we are going to click on this icon over here which is then going to open up our sources panel so what we are going to do is inside over here we are going to select code expression so basically what we are trying to do is we going to use the code expression feature to perform the calculation and then store the answer inside of the answer page State variable that we've created so you're going to click on create expression and then this is going to open up now inside over here there are two important things to take note of three in fact but we start off with these first two where it says add arguments you basically are going to add in the value that you want to perform the calculations on right so these are referred to as arguments in programming so in our case there are two values that we are going to take from the text field that we are then going to add and we are expecting an output now the output is this part over here where it is referred to as the return value now this option over here allows us to control the data type of the value that is going to be returned but in our case we are going to keep it as integer so this takes in the inputs and then this allows us to control the outputs and then under expression this is then responsible for the processing so we are going to click on ADD argument I'm going to click on this Arrow over here here where I can change the name if I want to so maybe I can change this instead to num one and then I'm going to change the type to integer why because the expected input is a number and that would then make it qualify as an integer so we're going to click on Integer and then the value of the number of the argument we're going to need to get it from the text field so we are going to click inside over here and then what we are going to do is we're going to scroll down to widget State we're going to click on this and then we are going to select text field one remember we changed the value here so we're going to select text field one so that's our first argument which is num one now let's add the second one this time I'm going to speed it up a little bit more we're going to say num two this is going to be an integer and then we're going to scroll down to widget States and we're going to select text field two now that we've done that we can use the names that we have given to our two arguments to then write out our code expression so how do we do that we simply going to go into here and we are going to say num one plus num 2 and that's it so we taking the first argument the second argument we adding them and then we are expecting a return so before we click to confirm you need to first check for errors by clicking on that then it's going to check and then once it does you can then click on confirm and voila now once you have done this you have basically taken the two values from the text Fields you clicked a button a code expression was generated and then the answer was stored inside of page State now we need to Output that value to Output it we're going to click on this text field here and then we're going to come to the properties panel and we're going to click on our sources icon next to text then what we are going to do is we're going to come here to combine text so combine text is a feature that allows you to basically add multiple values and concatenates them and store them inside of one text widget so we're going to use that to basically say the answer is and then we're going to add the text widget but inside here I am just going to press on the space bar to add space then I'm going to click on add text again and then inside the third option I'm going to click on the sources icon and then I'm going to come here to page State and then I'm going to select answer and then I'm going to click on confirm confirm and that is your application right so all you would have to do now is to click on this option up over here and then what it would do is it would open open up a another Tab and then within this tab it would run an instance of your application or let's just say a simulation of your application this usually takes a bit of time to load and by the time this is done loading you're probably going to have this so I don't think you need to really wait that long so thank you so much for watching the video please do leave a like do share if you found this informative and I'll see you again in the next video

Channel: Code Shinobi

Views: 233

Keywords:

Id: AqhzuvhyJUk

Length: 14min 35sec (875 seconds)

Published: Mon May 13 2024