Learn FlutterFlow By Building A Simple App! (FlutterFlow Tutorial for Beginners)

what's up guys so one of the best ways to learn flutter flow to learn how to build apps to learn no code is by practicing and by practicing I mean building apps and it helps a lot that when you're initially trying to learn is that you stick to simple apps simple yet powerful apps meaning that this is going to be a relatively quick app an app that you don't have to spend a lot of time building but this is going to be a very very useful app and it's going to be reactive and it's going to do a lot of nice things and so in today's video I want to show you how to build a very simple app but yet a very useful app and this app that we're going to be building is going to be a tip calculator and you may be thinking well this is a very very simple app but actually it's a lot more complex than it looks there's some features there's some functionality here that you have to implement that's not as straightforward as it seems and so we're going to with building this exact app today with the keypad and everything there and so you're gonna learn how to build such an app and make it reactive and make it super useful and by the way if you want to view this app clone this app exactly the same app as I'm about to build in today's video you can do so on my patreon page on my patreon page you will be able to view and clone all the apps that I've built on this channel in flutter flow and also you're gonna have access to extra content such as live streams and stuff like that so having said that let's get started so the first thing we're going to be doing is we're going to be building this from scratch so we're going to create this app we are going to call this tip calc we're going to start from a blank app here okay we're gonna skip Firebase this is a very very simple app no Firebase nothing like that just data just calculations and here we have a simple page here and let's go ahead and rename this page we're going to call this tip calculator all right so now we've done something at least we've began if you click here you see the uh the widget stream okay and this is the page that we have here and so let's take a look at what we need to do we need a bunch of fields we need this input field we need the slider and we need two kind of read-only fields these calculated fields and we also are going to be building this keypad here so that the user can enter by uh pressing on the numbers here so here we have a column this is typically where you begin because the column extends all the way down and so I'm thinking let's go ahead and add a container here and inside the container we're going to add our input field okay so if you type text you're going to have a text field here let's go ahead and take this container and make it a little bit wider okay that looks good and let's see if we can we can nicely Center it and we can also create a height of maybe 50. so that looks good to me this is going to be a nice input field and let's go ahead and wrap this widget inside a row this is good practice and now we have a row that we can nicely Center like this now the nice thing about containers is that you can create a box Shadow which kind of gives it this nice look here right this this really cool look and let's take a look at our box Shadow right here and what do we have we can also create an elevation okay very nice as well and we can also create rounded Corners let's do five something like this that looks kind of cool and let's do a little bit of padding on the text maybe of five okay that's nice and let's go ahead and Center this text field all right so that's what we have let's go ahead and give column a little bit of padding from the top so it has some room to breathe and this is going to be our main input field right this is where you entered the build that you received before you calculate the tip and before you calculate the final value next let's add another row for the slide and what I'm going to do is I'm going to duplicate this right here this construction and this thing instead of a text field we are going to add a slider but first I want to add a row inside because we're gonna have a couple of other fields we are going to have a slider so I'm I'm going to add a slider but I also want to add a text field that's going to display the slider value we're going to come here we're gonna just add a text field right here and we're gonna put it before the slider all right let's give it some padding here give it a little bit of padding from the top okay that looks good let's uh Center this align it yeah something like this maybe okay that looks actually pretty good uh next we need two more text Fields uh to display the tip and the total Okay so let's go ahead and duplicate this and let's duplicate it again all right so we can delete this and we can just put in the text field here delete that and the same thing here we can delete that slider and we can even Center this text field here it's nicely aligned inside the row there we go that's the roll that's centered up and that's centered within the row okay that's perfect okay so we have the input field we have the slider that's going to display the value right here because the slider by default it doesn't it doesn't display it and then we have this final calculated Fields all right now the way this is going to work is that when we enter the value or you know when it reads the value we want this value to be stored in local state because all of these um a lot of these other fields that we're going to be building uh Fields the buttons Etc they will need to read the value and it's always good practice to kind of get this value from local state communicate it with the local state so if we come here to the local state what we want to do is we want to add a new value and I'm just going to call it uh Bill final which is which is the final value of the bill and this is gonna be a double right it's a number it's a double uh we can persist it I'm not going to persist it it's not going to be persistent and let's say the initial value is 10. okay when the lower up it's 10. the bill is ten dollars all right so if we go back here what we want to do is we want this value to be linked to the local state so if I come in here and I go to the text field uh what I'm going to do is I'm going to say this is a number and the initial value is going to come from local state okay and we also want to format the value okay so we can say um number format we can say decimal we can say automatic displays currency all right so initially the value is 10 it's going to load up 10 okay next I want this text field to show the slider okay so what I'm gonna do is first I'm gonna rename my slider to input slider so I know this is a input field here this text field I'm gonna say input bill because it's also an input field and right here we're going to say set from variable we're going to say which state we're going to say input slider and we're going to format it as a percentage but before we do that um make sure you have your slider configured correctly okay so if I click on input slider what I want to do is I want to make sure that we have it uh configured correctly right so if I come in here click on my input slider so the way it's going to work is that the minimum is going to be zero the maximum is going to be one okay once we multiply it by 100 we're going to get percentages but by keeping uh in this kind of range it makes it easy to multiply the the number because a percentage is really you know it's it's a fraction of of one right so the initial value is going to be 0.2 meaning that this is what the slider is going to have 0.2 step size is going to be point one and that's it that's all we need and now the initial value is 20 which is kind of the standard tip in the United States minimum is zero zero percent if you want maximum is one one hundred percent step sizes ten percent so we're gonna come in here and this is actually set from the input slider but we don't want to display 0.2.3.4 we want it to be formatted as a percentage we're going to come here number formatting we are going to say percent and it automatically multiplies it by 100 and that's that percentage value we're going to say confirm all right so now we have the input field which is linked to the local state we got a slider we got the value from the slider and now we are going to have this is gonna be the tip right so how are we going to calculate the tip we are going to have a function that's gonna take this value and multiply it by this value so let's go ahead and create this function and that's actually very easy we're gonna go set from variable and there's no way to do it in flutter flow we need to multiply two numbers custom function create custom function and we are going to say calculate tip okay we're gonna return the double okay uh is list false nullable false here we are going to say this is going to be the final bill bill final which is a double uh false and here is going to be the percentage or or tip percentage which is going to be a double also and now this tip is going to be 0.1.2.3 it's not going to be 30 or 40. that's just the formatting it's going to be between 0 and 1. all right we're going to go into code and now we have the values and all we have to do is this return build final multiply by tip percentage that's it build finals will say a hundred tip percentage is let's say 10 or 0.1 okay then the chip becomes 10 okay very very simple we're gonna hit save and now we need to pass the parameters to the function so that it calculates it correctly okay so this is this field is going to be the value that's going to be returned from this function called calculate tip so we have the two arguments Bill final now the final we wanted to pull from the local state because that is the you know the source of truth of the of the value right we're going to come in here we're going to say local state uh tip percentage is going to be this thing right here which is essentially the slider which is slate uh input slider and we can also format it as currency which is nice we're gonna say automatic display as currency confirm and now we have a calculated field here which is going to be which is going to calculate this this and that okay so let's go ahead and run this app and make sure at least what we have so far works all right so we have a quick error which is not in there which is kind of a warning really it's asking us to double check this function this very very simple function okay no errors so let's go ahead and run this app and see what we got so far all right so here's the app the default value is 10. this is what it loads from the local store we have default tip is 20 percent and this is the result and so if we move this it automatically recalculates the tip so this works this works this loads it but we also need to do it so that we can modify it here and then we need to create a keypad where the user can enter value right from the app from the keypad okay so there are two things that we need to do well more than two things right we need the final value to calculate the final value which is relatively straightforward we need to create a keypad which is a little bit more involved and we need to make sure that the user can enter value and all of this is going to get recalculated so even though it seems like a very very simple app there's a lot of things at play here that is important to understand all right so let's go ahead and create this keypad first okay how do we create this keypad okay well the way we're going to create this keypad is we have a column we are going to add another element okay when other UI element and we're going to be adding a grid view okay now we have a grid view let's go ahead and give it a little bit of padding off on top okay so what this grid view does is that it allows us to display element in kind of a grid form okay and the elements we're going to be displaying are numbers okay so the way you do it is first let's go ahead and add our UI elements so the way I want to do it is I want this to be a container I want to wrap things inside a container because it makes things look a lot prettier and inside the container we're going to have a text field and let's go ahead and format this container actually let's do this grid view uh 10 everywhere and this container I really like this elevation really nice we can add a box shot or really cool makes it uh gives it kind of a nice effect and now we have the text and the way I want to do it is I want the text to be in the middle right so you can kind of do this this is a child so if you put 0 0 it's going to be right in the middle now this text here is going to display the digits which means we need a list of values one to nine to feed to this grid view so that it displays the values well how do you do that right we can go to the grid View and we can do a query type but we don't have a database we don't have a firestore or Firebase fire store or anything like that well we have to do something else okay what we're gonna do is we're gonna generate Dynamic children from a custom function you name it a custom function that's going to generate our arbitrary list okay so if we come here we can create a custom function and this function is going to give us a list back of values one to nine so it's going to say get list uh return data type is going to be an integer which is a list basically a list of integers and the code uh it's not going to take anything there's no arguments it's simply going to return a list of value values one to nine and the way we're going to do it is you can do something like this a little bit of code there and you can say generate and this function is going to generate a list for us so we're going to say we want nine values and here's where we need to specify how we want those values to be generated okay and so what we have here is an index and in computer science development program it always starts from zeros remember that so we're going gonna generate nine numbers and we have a value which represents the index so index of zero what do we want to do with that zero we wanna add one to it so the way we do it is we add one to it okay which is the same value except we're plus plus which is kind of like saying well plus one okay and that's all we have that is our function very very simple function and this function here returns nine values starting from an index of zero which is going to return to one so starting from one all the way nine values right so one two three and so on until we get nine values and that is our function right here and what's nice about this uh how we are doing it here is that we are not getting values from a database right because we don't have you know we don't have a values in a database that's a list of one to nine right nine values we need to generate this list this thing generates a list and we're gonna call this item I always call it items if 50 seen my previous videos I call it item or items I'm just going to say item confirm confirm and now this grid view is powered by that list of one to nine okay now what we need to do is we need to go into text set from variable we can access this item no further changes we don't need to format it confirm and now this is going to be one two uh one two three four Etc until we get to nine all right so let's run this app and see if it does what we needed to do so let's reload this app and there we go we have one two three four five six seven eight nine it's kind of small I want it to be bigger uh simply because it's a it's a number on a keypad so let's go back here let's make it 20. how does that look that looks nice let's go and see how it looks all right that looks a lot better isn't that nice we actually have a keypad here let's go ahead and give it a little bit more padding here gonna come here grid view let's give it a little bit more padding and the padding we want to give it let's give it a padding of 20. uh 20 let's see how that looks let's refresh it all right that looks good to me I mean you guys can play around with it decide what looks better for you ah this is all minor stuff now the way this is gonna work is that we have 10 here if we click on any value it's gonna append the value okay so if we click on one it's going to be 1.101 and it's going to recalculate everything if you click on two it's going to be 102 and it's going to recalculate everything now how do we do that okay well it's actually fairly simple right you can go to The Container here and on the container level we are gonna create an action okay we're going gonna open our flow editor and we're going to add an action so on tap once we click on that individual digit there what we want to do guys is we want to calculate a new value provided we have the existing value so if it's 10 and the user clicks on one we want it to be 101. now what we want to do is we want to update the local state remember we're not updating the widget we're updating the local state where the widget in turn gets its value from all right so we're going to comment here this is our first action here we're going to go in here and we are going to update local state whereas our local state there we go update local state which local state we only have one local state and the update type set value value Source from variable and guess what guys we need another custom function okay we're gonna come in here custom function and we're going to create a new function and this function is going to be called a pen digit because all we are doing is appending a digit that the user clicked on there is a little bit more involved kind of behind the scenes but what we're going to be returning is a new double okay we're gonna say double now for the arguments we're going to be passing two arguments the initial value and the digit that we want to append that way the function has access to both values and it can do its magic okay so this is the initial value which is a double okay and this is the digit okay digit which is an integer okay digits are integers okay and now we need to build this function so ask yourself how can you do it okay let's say we have 10 how can you uh turn 10 into 101 if somebody clicks so one well the way you do it is actually you take initial value return initial value multiply by 10 right we are adding another digit and because we're working in the base 10 system we need to add a 10 and then we add the digit okay that is the way you want to do it and so if the initial value is 10 and somebody presses one we multiply by 10 we got a hundred we add one okay and this works uh regardless you know how many digits we have if we start with a hundred somebody you know presses two we multiply by ten we get a thousand we add two okay we are going to hit save now that is the function we have now we get a value back and we need to update the local state again okay so uh we get the value back and this is what we're essentially updating the local state with so let's go ahead and pass those values the initial value is going to be uh the local state right we're working with the local state so we have the local state the digit is what the user pressed so from variable which is the item and that's all we have confirm and now the result of this function is that new value which is going to become the new local state now there's something else we need to do in order for that new value to be reflected to be refreshed we need to refresh the page we're going to come here navigate to home page we're just going to do an instant that way it's automatic and that way when they click on it we are gonna update the local state this is going to pull from the local state and it's going to refresh and that way the new valve is going to show up all right let's go ahead and try this out let's check those local functions all right no errors let's reload our test environment all right so here's what we got this is our 10. let's go ahead and try two okay you see how it updated it updated the local state and then it refreshed the page it this variable was pulled from the local state it shows 102 and everything else was automatically updated so 20 is as you can see we can do that and this is automatically refreshing right so 102 20 is a little bit more than 20 bucks okay look at that beautiful right let's say it's 102 let's say user press is nine 1029 nicely formatted twenty percent and we get the value here all right look at that so what's left well what's left is this final value which is basically a sum of this and a sum of that and as you guess this is going to be another very very simple custom function to calculate it so let's go ahead and do that right now and let's go back to the app here we have this thing here set from variable we're going to say custom function and this is going to be add values and you know guys you can create this kind of function with two arguments and you can reuse it in many situations because it's a fairly General fairly generic function so we're going to be returning a double and we're going to take Val 1 which is a double vowel 2 which is also a double you know two doubles we're gonna come here and all we need to do is return Val 1 plus Val 2. okay we're gonna hit save and now we have the function let's go ahead and pass in the arguments okay so the first argument is going to be this thing and guess what we're going to pull it from the local store We're Not Gonna We're Not Gonna use the widget here right local store is is the the source of Truth okay from variable local storage now this value here this is a text field so we have no access to it inside flutter flow it's not like an input field so what we need to do is you guessed it we need to recalculate it again using that existing function so we're going to say instead of pulling it from a specific variable we're going to say well this is going to be a custom function and this is going to be calculate tip and we're going to recalculate that tip again okay it's not a big deal it's a very quick calculation Bill final is going to be our local state see percentage is going to be our guess what slider right slider confirm now we have the tip we have the bill final we're adding a bill final with the tip okay and let's go ahead and format it nicely kind of the icing on the cake automatic displays currency and we have the dollar amount here let's take a look if that works hopefully that's gonna work and we need to double check the functions for errors all right no errors here looks good let's go ahead and reload all right so what do we have we have 10 20 tip that's two dollar tip 12 is the final value look at that look how beautiful it works let's go ahead add a three okay one or three twenty percent 103 plus 20.6 123 and you can increase the tip let's add another one let's say we we had a really really big dinner we went to like four seasons okay we had a lot of people and the bill came out to let's say a thousand Thirty One twenty percent tip let's say that you know the the service was really good let's give it 30 actually I'm thinking maybe the step in the slider make it um 0.05 so like five percent that's another quick change otherwise it's like 20 30 maybe you want to leave a 25 tip so we have a 300 tip and then we have the final value this uh that is kind of what we we have another thing that we can add is we can add a zero right maybe just wanna you have ten you wanna add a zero get it to a hundred uh another thing you might want to do is you wanna add a uh backspace right this this thing here backspace uh which deletes the values and that's pretty much it we don't need to do any of this it does it all automatically everything works automatically we maybe we can make the step 0.05 instead of 0.1 this is a nice change but that is it that is how you create a very simple app with a very useful app and really a a very kind of dynamic uh reactive interactive apps uh which is kind of you know what what people want to see they want to see these kinds of apps all right so take a look at this beautiful let me go ahead and change the uh step for the slider all right let's come in here and we are going to say step size 0.01 all right let's go ahead and reload this see how it looks alright so now we can say 25 I can put eight three and I can leave 25 I can leave 30 I can leave 15 if I wanted to and that is precisely how you build a tip calculator with flutter flow and almost no code [Music]

Channel: James NoCode

Views: 9,313

Keywords: flutterflow training for beginners, flutterflow for beginners 2022, flutterflow training, flutterflow

Id: Zxcgn1M30HU

Length: 28min 2sec (1682 seconds)

Published: Sat Sep 03 2022