Building a BMI app with Flutter

Learn Flutter by making a BMI calculator app

Welcome to another blog where you will learn to build a simple BMI App with Flutter for beginners.

So, let’s start this!

First of all, create a flutter project in your favorite IDE. I prefer IntelliJ but you could have some other preference.

Remove all the code of the counter app which loads by default on the IDE. Then add the following code for starters.

Select a class name for your HomeScreen for the BMI app so that the home attribute could refer to that class and open the HomeScreen. Which should look like this.

We will create a Stateful class of Home(). After which the code should like this.

Then instead of returning the container widget, we will have it return the Scaffold widget. We will use the app bar attribute of the Scaffold widget to create the app bar and add a title to our app. After it should look like this.

We will adjust the title by aligning it in the center, increasing the size of the text, changing the color of the text, and also change the color of the app bar.

Now let’s add an icon to our app so that it gets its own identity. I am using this icon but you can use any as per your choice. So the first thing now we have to do is create a new folder in our project directory and name it assets. Under this asset folder, we will create another folder and name it as logo. Keep a habit of putting everything cleanly in different folders so that it is easy for anyone to understand what is where in your project. The project directory should look like this after adding your png file in the logo folder.

If we want to use this asset in our app then we will have to import it in our project. For that go to your pubspec.yaml file and under the assets, attribute add the following line. Remember that the name of my png is bmi.png and it is under logo directory which is under another directory assets.

- assets/logo/bmi.png

And after adding this line to your pubspec.yaml file click on the pub get to import it. If there is an error then the most common error is when the assets attribute is not in the proper indentation. So take care of it.

Now you have imported your image lets use it in our app.

We have the logo, we have the app bar what else do we need?

How are we going to take the input from the user? Let’s add some TextFields in there to take user input.

After adding 3 TextFields in the app the code looks like this.

We still have some work to do with the TextFields. We will add a controller which lets us listen and control the text of the TextField as well. Then add the KeyboardType as a number because we don't want any alphabets or special characters as input. End this by adding some decorations like hintText, labelText, and an icon.

We are defining the markers for the 3 TextFields as in when the user enters the data it will be saved in these variables and these are final as we don’t want it changed throughout the code to maintain the homogeneity throughout the code. The exact job of the TextEditingController as stated in the doc is

Whenever the user modifies a TextField with an associated TextEditingController, the TextField updates value and the controller notifies its listeners. Listeners can then read the text and selection properties to learn what the user has typed or how the selection has been updated.

After adding the TextFields our app looks like this.

Let’s add a button

We will have the parent widget as padding for the button to provide padding around all sides of the button. Using the Raised Button widget with text on the button as calculate, color as lime, and on getting pressed it will refer to the Calculate function which is the logic part of the app that we will build next.

Let’s build the logic part of the app. We will create a function Calculate and use the setState. What it does is that it notifies the framework that the internal state of the object has changed in a way that might impact the user interface, which causes the framework to schedule a build for this State object. So we use setState when the state of the widget is going to change so that the to trigger a rebuild of the view and see immediately the changes.

The next part is to convert the input given in the TextField to integer and double( age in integer and height and weight in double). Then check if all the TextFields are not empty and the entered value is greater than 0 then calculate the result. We the BMI index so we check in what category the person lies by using if else condition and provide the person with a category.

We have the logic part ready. Let’s print these results on the screen so that the app user gets the output for his/her input. Let’s add 2 text widgets which will display the result i.e the BMI index and the category in which the person lies.

The final app looks like this after entering some random data in the TextFields.

I hope you all liked this blog and it helped you get started with Flutter! Don’t forget to smash that clap button and leave a comment down below.

Meet you in the next one!

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer