Flutter BMI Calculator App Tutorial | Flutter Beginner Tutorial

in today's video I'm going to be showing you guys how to create a BMI calculator app within flutter the user is going to be able to select their gender using this application after that they'll be able to input their height using a slider user is also going to be able to provide to us using stepper buttons their weight as well as height and once all of the information has been collected when they click on this Floating Action button it's going to go ahead and calculate the BMI for them before I get started I just like to quickly mention the links to all of the resources that I mentioned within this video as well as the link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point to get started the first thing that we're going to be doing is adding a dependency to our project which we're going to be using which is the item count number button so link to this will be down in the description below just copy this come back go to your pope.l file and add this under the dependency section and after this that's pretty much it once this is done you can do command save let flutter pup gets do it magic and once this is done then you can start running the application and once the application is running on my simulator then I'll resume the video so the first thing that I'm going to be doing now that my application is running on the simulator is come to my homepage which is just a empty stateful widget which for now returns in its H page State class for its build function a scaffold I'm going to go ahead and add the appar property to the scaffold and it's just going to have a title which is going to be centered it's going to be called BMI calculator once this is done the next thing that I'm going to be doing is actually adding a body attribute to my scaffold like so which is going to be a called to a function called build UI then I will Define this function underneath of this class and I am going to say that it's going to be called build UI and I'm going to open it up and then within build UI what I'm going to be doing is returning a column and the reason we're going to be returning a column is because if I take a look at the actual design of my application we have widgets that are arranged in a vertical Manner and the way we do this is by using a column so I will do a column and I'll Define the children list for this and for now it's going to be empty once this is done the next thing I'm also going to be doing is adding The Floating Action button to my actual SCA and this is going to be equal to Floating Action button like so and then onpressed for now is going to be an empty function and do command save and mid this we are going to be seeing an empty Floating Action button being displayed to us since I want an icon to be displayed what I'm going to do is set the child property for this function to be an icon which is going to be icons. calculate to command save and now we have the icon being shown so once this is done before we proceed with creating any of the UI what I'd like to do is actually Define the variables which are going to help us store the relevant information for calculating our BMI so I'm going to create a integer and I'm going to say that this is going to be the selected gender and I'm going to say that if our integer value is going to be zero then it's going to be male if it's going to be one then we'll refer to it as female and by default the value is going to be zero once this is done I'm also going to set the height variable and I'm going to set that this is by default going to be 170 since we actually store our height in centim once that is done I'll set the age to be equal to to 23 and then finally I'll create a v variable and I'll set that to be 65 and with this done I'll do command save then I will also create another which is going to be a double variable I'll call thisor BMI and I'll set that to zero to start with and do command save so now that we have variables defined which we are going to be using to store information into and then using these to actually calculate our PMI we can proceed to creating our UI to create my UI the first thing that I'm going to be doing is actually creating the gender selection widget which is the one here so let's get into it so to do this firstly what I'll do is I'll come to my column and I'm going to say that the first child within this colum is going to be a call to a function which is going to be called gender selector once this is done then what I'll do is that I'll Define this function so I will come down I'll say that we're going to have a function which will return a vidget called gender selector and open it up within this I'm going to say that I'm going to return a container like so and then before I add anything to this container I'll add a semic colon at the end this container is going to have a child within this which is going to be a row and the reason we're using a row is because if you take a close look at our design you're going to see that we have two buttons one can help us select a male and a female and they're arranged in a horizontal manner this can be achieved by using a row once this is done the next thing that I'm going to be doing is actually coming into the row and defining the children's list for this and actually adding a child within this since my actual button to select it gender is going to have an actual icon and then a text widget underneath of it I'm actually going to be creating a column and then within this column I'm going to add some children like so and then do command save So within this column the first thing that I'm going to be adding is actually an icon button so for that I'll do icon button like so and then on on pressed I'm going to leave that to be empty for now and then the icon here is going to be a icon widget like so and then I'm going to say that it's going to be called icons. mail like so and then I will do command save and hopefully our icon is being shown so now I'll update some of the properties on the icon the first is going to be change its size and set that to be 60 so icon button icon size is 60 once this is done I'll come to the bottom of this column so afterneath of after my icon button and I'm going to add a text widget here which is going to say mail like so so now that this is done what I want to do is actually set up the positioning for these actual buttons so for that I'm going to modify some properties of my row I'm going to set the main axis size for my Max for my row to be Max I'm going to set the main axis alignment to be space evenly and then I'm going to set the cross AIS alignment to be Center like so and do command save and now that this is done the next thing that I'm going to be doing is actually determining what the color of this actual icon should be so if we've selected male then the color for this icon should be different and if it's not selected then it should be different so to do this what I'll do is that I'll come to my icon and I'm going to set the color property for this icon buttons icon and I'm going to say if the selected gender is zero then we're going to have this color and the color is going to be extracted from our theme so I'm going to do theme do off context then dot I'm going to say color scheme. primary and if this is not the case if the selected gender is not zero then I'm going to do colors. black so if I do this and do command save going to see that now the color of our icon changes to blue because currently the selected gender is zero so now that this is done the next thing that I'm going to be doing is actually setting up the onpressed button call back so that we actually set the gender to be whatever gender we select so I'm going to call set State and within set state I'm going to say that selected gender is going to be zero like so and command save so once this is done that's pretty much all we had to do so now what I'll do is that I am going to basically come to my column I'm going to copy all of this this code and I'll also close down this debug console and then what I'm going to be doing is that after this column within the row children list I'll paste the same widget again like so and do command save so now we have two buttons but for this button the second one I want it to be for female so I'll change the text to be female and once that is done I'll change the icon to be icon. female and then I'll also change the logic to be if the selected gender is one then we show this otherwise it's black and then when we call set State I want to set the selected gender to be one with this done now we can switch between the genders as you can see so when we click on the male one it highlights that when we click on female it highlights that and we're appropriately storing this information in a variable so the final thing that I want to do is add some styling to The Container so that it looks pretty like this so for this what I'm going to be doing is I'm going to be coming at the top to my container and within my container I am going to to be adding the decoration property like so I'm going to say it's going to be box decoration the color is going to be text. off context color scheme primary container border radius 15 do that and then I'm going to add some margin and padding so to The Container I'm going to add some margin and padding do command save and there we have it now it's looking pretty fantastic so now that we are able to select our gender we can move on to the next step so the next step is going to be our height input so for that what I'll do is that I am going to come back firstly to my actual build UI function and then here I'm going to say that after we have our gender selector I'm going to have my height input to command save then I will come back and I'm going to say that I'm going to have a widget which is going to be returned by a function that is going to be called height input and then I'll open this up within this function what I'm going to do is actually return a container which is going to be exactly the same as the container that we're returning for gender selector because I want the styling to be same so I'll copy all of this up till the child I'll come down and I'll paste it here like so and then I'm going to add the remaining bracket like so and once this is done for the child here what I'm going to be doing is saying that we're going to have a column and then I'm going to set the children's property now to be empty and command save and that's pretty much it so now we have our height input so for the column why are we using a column well the reason for that is because for our height we have three separate things that are being displayed within our container we have our height following that we have a slider following that we have the actual input so we have three different widgets that we want to align in a vertical Banner for that we're using a column within our container so once this is done within my column the first thing that I'm going to be doing is adding a text widget with some certain styling applied to it and do command save so I can see that and once this is done the next thing that we're going to be doing is adding my slider so to add my slider I'm going to create a slider widget and then the initial value for the slider is going to be our height and then I'm going to say that it's going to be two double and the reason we have to cast it to a double is because our slider expects the value to be a double and then what happens when we change the slider well in this case we're going to get a value that's going to be passed to us and I'm going to call set State like so and within set State I'll stop running my application for now since we have to Define some additional parameters for our slider with ins set State what I'll do is that I'll say that our height is going to be equal to the value and then do 2 int so I'll cast the double that we get to an integer and then save that within the actual height variable add the remaining commas wherever they are necessary into command Sav so now for our slider it's not going to work as of now because we need to Define some other properties for it so let's do that so firstly what we're going to be doing is defining the minimum property so the minimum value that we can select on our slider which is going to be zero the maximum since we're actually going to be recording the height in centimeters the maximum that I want the height to be selected is going to be 300 so 300 equates to 300 cm and then how many divisions are we going to separate our actual Min and max range into so I want the increments to be in 1 cm increments so I'm going to say that we're going to divide into 300 divisions so 300 by 300 which means every division is going to be 1 cm or one and do command save so once this is done I'll start running my application and hopefully this time we're not going to get any error and while this is happening the next thing that I'm going to be doing is actually after my slider adding a text widget and I'm going to say that in our text widget we're going to be basically uh saying showcasing our height so I'm going to interpolate the height by using a dollar sign and then adding the height we able and then adding a space and CM after that and do command save so by default 170 is what the value was set to when we actually create create our variable here like so so now if I go ahead and change this you can see that our slider is working as intended and the value is being updated so the last thing that I'm going to be doing is actually applying some styling to the text doing command save and that's pretty much it that's all we had to do so now that this is done the next thing that we have to do is create our actual widgets for selecting the weight and the age and the weight and the age widgets are going to be in a row so how are we going to be achieving this well to achieve this the first thing that I'm going to be doing is actually going to the very top where I have my build UI function and in my build UI function I'm going to basically call another function after height input which is going to be a function which is going to be called weight and age input row and command save then I'll copy this function name and it's going to be the same gist as before I'm going to come to the bottom of my class I'll say that we'll return a viget using this function which is going to be named underscore weight and age input row and then open it up and within this function what I'm going to be basically doing is returning a row so I'm going to say that we're going to return a row and it's going to have some children and do command save then the first child for this row is going to be a call to a function called weight input so I'll add that and do command save and then similarly I'm going to create a function which is going to be called weight input Returns the videt and open it up within this I'm I'm going to be adding the same container since the styling remains pretty much the same so for this what I'll do is that I'll come to the top of my height input I'll copy all of this container stuff up to the point where we have this column widget so copy this paste it here add the remaining brackets like so do command save then I'm going to set the children's property for the column to be empty children's for now and do command save so let's see how our actual widget is going to look so we have this weight text underneath of that we have this button that allows us to increment or decrement our weight so firstly we're going to add a text with some certain styling applied to it that is going to say weight so let's do that and do command save and I'm also going to update the actual padding property here so the padding now is going to be not only vertical but horizontal as well 10.0 and do command save once this is done the next thing that I'm going to be doing is actually adding the item count widget and this is going to come from the package that we have added before it's going to expect us to give it some places firstly since I do not want my weight to be in decimals I am going to set the decimal places to zero onchanged is going to be the same just we're going to have a value that's going to be passed to us and then I'm going to call set state within this and within set State what I'm going to be doing is actually saying that we will set our actual weight to be equal to the value that gets passed to us and then I need to to cast this to a integer and do command save then for the minimum value the minimum weight that I want somebody to input is going to be 50 so you can't go under 50 kilos and the maximum is going to be 350 kilos which is a lot but we'll kind of run with it and then after this I'm going to say that the initial value for this is going to be the weight like so and do command save so once this is done as you can see the weight widget is now being shown to us and I can increment and decrement the weight so the final thing that I want to do is update the buttons width and height so I'm going to paste these properties in do command save and that's pretty much it that's all we had to do so now I'll do command save and it's looking pretty stunning now if I might say so myself so now that this is done what I am going to be doing is basically copying all of this function and then I'm going to past it it and here what I'm going to do is that I'm going to firstly say that now it's going to be saying age and on this actual item counts on change dis hold this time we'll set the age to be whatever the value is like so and then I am also going to update the minimum and maximum value so this time the minimum value is going to be one and the maximum is going to be 100 and then once this is done I going to change the name for this function to be age input then what then as we had done before I'll copy this age input I'll come to the function where we actually Define the row which is here weight and age input row add this after the weight input and do command save and once this is done the last thing that I'm going to be doing is actually adding some properties to my R to actually set up its positioning and everything so do command save so now our inputs are centered and they're also evenly spaced and everything looks fantastic so now the last thing that I need to do is actually implement the actual result container which is going to show us the result of our BMI calculation so for this what I'll do is that I am going to firstly come to the bottom and here I'm going to say that I'm going to have a function which will return a viget called BMI result and then within this I'm going to have the same container with the same type of padding so I'm going to copy all of this container stuff up to the point where the child is and come down paste it here the child is going to be a container and then I'm going to add the remaining columns like so do command save then I'm going to take this BMI result I'm going to go to the very top where I have my main column defined within build UI and after the weight and age input row I'm going to add the BMI result and do command save and now finally I will come down to my BMI result and I am going to change the child here to be a text Now widget the text widget here is going to say BMI and then after this we are going to show our calculated BMI so for that I am going to do dollar sign and then I'm going to add some curly brackets then I'm going to do BMI and then Dot and do command save and that's pretty much it so now our BMI is being shown so once this is done I'm going to add some styling attributes to this command save and there we go our UI is looking fantastic so now that this is done what I want to do is actually make sure that when we click on this button it actually calculates the BMI for us so to do that what we are going to be doing is coming to our build function and then going to Floating Action button and onpress property and here I'm going to call set State and then this is where all of the magic is going to happen and I'm sorry to let you guys know that when we actually create calculate the BMI we are not going to be using either the gender or the age of that person the only thing that we're going to be taking into consideration is the weight and height but since I wanted the UI to look a bit pretty and showcase to you guys the different elements that you can use that's why I decided to add these as well but to actually calc calate the BMI all we're going to be doing is setting the BMI to be equal to and this is the actual formula we're going to take our weight and we're going to dividing this by the height squared so to square something we're going to do the power function where the first is the actual value that we want to square so it's going to be height and then what we want to square it to so in this case we want to square it so we want to raise it to the power two but Power allows us to raise any value to whatever exponent we want and then do command safe but if we do it like this our actual BMI is going to be calculated incorrectly because this function takes into consideration the weight being in kilos and then the height being in meters so since we're actually calculating the height in centimeters I am going to divide the height by 100 and then our BMI calculation is going to be correct because the height divided by 100 is going to be the height in meters so once this is done we're going to do command save and if I go ahead and click on my actual Floating Action button you're going to see that the BMI is calculated for me so the last thing that I want to do is actually update how the BMI is displayed and limit how many decimal values we are showing so I'll come to the bottom where we are showing the BMI in the text and I'm going to say that we are going to have a call where I'm going to do two string as fixed so this is going to allow us to take our number and then convert that to a string up to a fixed amount of decimal points and I'm going to say two to be the value to command save and now RBM is only showing up to two decimal points I think one is enough so let's do one and there we go it's looking fantastic so with this done let's reload our application let's make sure that nothing is broken and once this is done let's just change some of the stuff so I'll increase the height 273 let's change the weight to be 77 and as you can see when we change the weight the age is also changing so what's the reason for that um let me see I'll come to my age input and there's the issue the initial value is still set to weight so we going to set the initial value to age to command save so now when we update the age it updates the age when we update the weight it updates the weight I click calculate it calculates the BMI for us so with that that's pretty much it for today's tutorial I hope that you enjoyed the tutorial if you did please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 1,930

Keywords: flutter bmi calculator, build flutter bmi calculator, flutter bmi calculator github, flutter bmi calculator tutorial, Flutter BMI Calculator, Flutter BMI Calculator tutorial, build Flutter BMI Calculator, how to Make BMI App in Flutter, BMI Calculator, flutter responsive UI, flutter app design, flutter tutorial for beginners, BMI calculator height and weight, flutter calculator, build BMI calculator on flutter for beginners, bmi calculator in flutter, flutter app development

Id: tzEMvGFB0Wg

Length: 21min 26sec (1286 seconds)

Published: Sun Jan 28 2024