Flutter BMI Calculator App

Recently I got message on Social Media that please help me I am unable to fix this bug.I asked for code and I saw that her code was insane.

I asked from where you are studying and I got response Udemy. I asked the instructor name and thought I should also start making course 😂.

The app was originally created by the Sptadeepa Ghosh, All the UI is done by her. I only fixed the bug and after that made the made video.

Get Started #

Here is the video tutorial of building the BMI calculator, If you prefer watching video then you should watch this.

Step 1 #

Let’s start the app by building the UI and it’s easy but I will break into small part so that it will be more clear.

These are the widget which I will be using in the application.

AppBar
Text
Column
Text Input
Icon
Text Button

Let’s build the basic scaffold firs then we will move into depth.

Skelton of the app #

Step 2 #

Let’s convert the skeleton to the flutter app.

demo.dart

    return Scaffold(
      appBar: AppBar(
        title: Text('BMI Calculator'),
        centerTitle: true,
        backgroundColor: Colors.pinkAccent,
      ),
      body: Column(
        children: <Widget>[
            TextField(
                decoration: InputDecoration(
                    labelText: 'Weight in cm',
                    icon: Icon(Icons.trending_up),
                ),
            ),
            SizedBox(height: 20),
            TextField(
                decoration: InputDecoration(
                    labelText: 'Weight in kg',
                    icon: Icon(Icons.line_weight),
                ),
            ),
            SizedBox(height: 15),
            TextButton(
                color: Colors.pinkAccent,
                child: Text(
                    "Calculate",
                    style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
            ),
            SizedBox(height: 15),
            Text(
                "Result will be here" ,
                style: TextStyle(
                    color: Colors.redAccent,
                    fontSize: 19.4,
                    fontWeight: FontWeight.w500,
                ),
            ),
        ],
    )

The above Code UI WILL BE ADDED HERE

Step 3 #

Now we will bind the input controller with the weight and height field. It will help us in getting the value from the field.

partial-demo.dart


  final TextEditingController _heightController = TextEditingController();
  final TextEditingController _weightController = TextEditingController();

Now we have defined two controller for two Text Field. Let attach to the the respective text field, So that we could have control over the Text Field.

partial-demo.dart

TextField(
  controller: _heightController,  // Added
  decoration: InputDecoration(
    labelText: 'height in cm',
    icon: Icon(Icons.trending_up),
  ),
),

Let’s attach tot he wight also.

partial-demo.dart

TextField(
  controller: _weightController,  // Added
  decoration: InputDecoration(
    labelText: 'weight in kg',
    icon: Icon(Icons.line_weight),
  ),
),

Step 4 #

Now we will write the function to Calculator BMI and add the event with button click event. So whenever we will click on the button it will calculate the BMI.

Let me show you the formula first then we will add this to our file demo.dart based on our case.

/*
    @params heigh is in Meter
    @params weight is in Kilogram
*/
double calculateBMI(double height, double weight){
    double heightSquare = height * height;
    double result = weight / heightSquare;
    return result;
}

The above code is for refernce so that you can know the formula for BMI(in case you don't know).

partial-demo.dart

void calculateBMI(){
    double height = double.parse(_heightController.text) / 100;
    double weight = double.parse(_weightController.text);
    // We dived height by 100 because we are taking the height in centimeter
    // and formula takes height in meter.

    double heightSquare = height * height;
    double result = weight / heightSquare;
    print(result);
}

Let’s attach the method to the button click or press.

partial-demo.dart

TextButton(
    color: Colors.pinkAccent,
    child: Text(
        "Calculate",
        style: TextStyle(color: Colors.white),
    ),
    onPressed: calculateBMI,
),

STEP 5 #

In the previous step we created the BMI calculator which kind of works but there is problem. The app is showing the result in the console and we want in the app.

partial-demo.dart

double _result;  // new variable defined for result

void calculateBMI(){
    double height = double.parse(_heightController.text) / 100;
    double weight = double.parse(_weightController.text);
    // We dived height by 100 because we are taking the height in centimeter
    // and formula takes height in meter.

    double heightSquare = height * height;
    double result = weight / heightSquare;
    print(result);

    // setState will update the UI
    setState((){
      result = result;
    });
}

We are still missing one things, we have never called the result variable in the UI. We just defined the result variable so If would have called this earlier then this would be injustice for the reader.

partial-demo.dart

Text(
  _result == null ? "Enter Value" : "BMI : $_result",
  style: TextStyle(
    color: Colors.redAccent,
    fontSize: 19.4,
    fontWeight: FontWeight.w500,
  ),
),

Step 6 #

In this step we will limit the two digit after the decimal so that it will look consistent and not break the UI.

The above code is good and everything works fine but there is a UI related issue which user will face someday.

There is one more issue that the decimal value could be very long i.e. There could be 2 digit after decimal or 8 digit after decimal.

Let’s make the UI consistent by doing a simple tweaks.

partial-demo.dart

Text(
  _result == null ? "Enter Value" : "BMI : ${_result.toStringAsFixed(2)}",
  style: TextStyle(
    color: Colors.redAccent,
    fontSize: 19.4,
    fontWeight: FontWeight.w500,
  ),
),

toStringAsFixed allow us to limit the number of number after decimal.

Conclusion #

I break down the everything into small parts so that it will become easy to follow. Let me know if I succeed in doing that or not or you still face issue in understanding this.

If you are beginner and understand everything then it’s really good because you learn lots of important things.

TextInput
Text Input Controller
Calling Method
Updating UI

You can share the feedback in the comment or tweet about the also (don’t forget to tag @nstack_in).

Full Source Code #

The full source code be also found at the github but code is not very big so I put it here also.

I would have added Sptadeepa Ghosh github url but she don’t use GitHub.

main.dart

import 'package:flutter/material.dart';
import 'demo.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pinkAccent,
      ),
      home: Demo(),
    );
  }
}

demo.dart

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  final TextEditingController _heightController = TextEditingController();
  final TextEditingController _weightController = TextEditingController();

  double _result;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI Calculator'),
        centerTitle: true,
        backgroundColor: Colors.pinkAccent,
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _heightController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                labelText: 'height in cm',
                icon: Icon(Icons.trending_up),
              ),
            ),
            SizedBox(height: 20),
            TextField(
              controller: _weightController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                labelText: 'weight in kg',
                icon: Icon(Icons.line_weight),
              ),
            ),
            SizedBox(height: 15),
            TextButton(
              color: Colors.pinkAccent,
              child: Text(
                "Calculate",
                style: TextStyle(color: Colors.white),
              ),
              onPressed: calculateBMI,
            ),
            SizedBox(height: 15),
            Text(
              _result == null ? "Enter Value" : "${_result.toStringAsFixed(2)}",
              style: TextStyle(
                color: Colors.redAccent,
                fontSize: 19.4,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void calculateBMI() {
    double height = double.parse(_heightController.text) / 100;
    double weight = double.parse(_weightController.text);

    double heightSquare = height * height;
    double result = weight / heightSquare;
    _result = result;
    setState(() {});
  }
}

Flutter BMI Calculator App

Flutter BMI Calculator App

Get Started #

Step 1 #

Skelton of the app #

Step 2 #

Step 3 #

Step 4 #

STEP 5 #

Step 6 #

Conclusion #

Full Source Code #

Subscribe to our Newsletter