How to Make Simple BMI Calculator App in Flutter?

Flutter SDK is an open-source software development kit for building beautiful UI natively compiled in Android Studio. In this article we will create a Simple BMI Calculator App using Flutter in Android Studio, that can take height and weight, based on that it will show you the BMI, as well as the text background color, which will change. The concepts covered are:

1. Edittext
2. Background color
3. Flutter App State

There are some simple steps to create a Simple BMI Calculator app using Flutter using Dart.

IDE Used: Android Studio

Step By Step Implementation

Step 1: Creating a new Flutter App in Android Studio

Open Android Studio and create a new Flutter project there. Then set the project name, Flutter SDK path as given.

Create a new Flutter Project

Step 2: Create a new .dart file for Calculation purposes and code it

After opening a new flutter project in Android Studio, you need to create a calculator.dart file under the lib folder. 

Creating calculator.dart file under the lib folder

Then Code this, on the calculator.dart

Dart

import 'package:bmi_calculator/main.dart';
import 'package:flutter/material.dart';

class BMICalculator extends StatefulWidget {
  const BMICalculator({Key? key}) : super(key: key);

  @override
  _BMICalculatorState createState() => _BMICalculatorState();
}

class _BMICalculatorState extends State<BMICalculator> {

  Color myColor = Colors.transparent;
  TextEditingController weight_Controller = new TextEditingController();
  TextEditingController height_Controller = new TextEditingController();
  var main_result = TextEditingController();

  CalCulate_BMI (String weight,String height) async{
    var myDouble_weight = double.parse(weight);
    assert(myDouble_weight is double);
    var myDouble_height = double.parse(height);
    assert(myDouble_height is double);

    var res = (myDouble_weight/(myDouble_height*myDouble_height));

    setState(() {
      main_result.text = res.toStringAsFixed(2);
      if(res<18.5){
        myColor = Color(0xFF87B1D9);
      }
      else if(res>=18.5 && res<=24.9){
        myColor = Color(0xFF3DD365);
      }
      else if(res>=25 && res<=29.9){
        myColor = Color(0xFFEEE133);
      }
      else if(res>=30 && res<=34.9){
        myColor = Color(0xFFFD802E);
      }
      else if(res>=35){
        myColor = Color(0xFFF95353);
      }
    });

  }

  @override
  Widget build(BuildContext context) {

    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: SingleChildScrollView(
        child: Center(
          child: Container(
            height: height,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [
                      const Color(0xFF6DD5ED),
                      const Color(0xFF2193B0)
                    ]
                )
            ),
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                    height: 100,
                  ),
                  Text("BMI Calculator",style: TextStyle(fontWeight: FontWeight.bold,color: Color(0xFF0038FF),fontSize: 25),),
                  SizedBox(
                    height: 30,
                  ),
                  Padding(padding: const EdgeInsets.only(left: 15,right: 15,top: 10),
                    child: TextField(
                      controller: weight_Controller,
                      keyboardType: TextInputType.numberWithOptions(decimal: true),
                      style: TextStyle(fontSize: 18,color: Colors.black),
                      decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        hintText: "Enter your weight (kg)",
                      ),
                    ),),
                  Padding(padding: const EdgeInsets.only(left: 15,right: 15,top: 15),
                    child: TextField(
                      controller: height_Controller,
                      autofocus: false,
                      keyboardType: TextInputType.numberWithOptions(decimal: true),
                      style: TextStyle(fontSize: 18,color: Colors.black),
                      decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        hintText: "Enter your height (m)",
                      ),
                    ),),
                  Padding(
                    padding: EdgeInsets.only(top: 50),
                    child: Center(
                      child: SizedBox(
                        width: 180,
                        height: 50,
                        child: ElevatedButton(
                          onPressed: (){
                            CalCulate_BMI(weight_Controller.text, height_Controller.text);
                          },
                          child: Text("Calculate",style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold,color: Colors.white),),
                          style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all(Color(0xFF0038FF)),
                              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                                  RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15.0),
                                  )
                              )
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 80,
                  ),
                  Center(
                    child: Container(
                      width: 300,
                      height: 100,
                      decoration: BoxDecoration(
                          color: myColor,
                          borderRadius: BorderRadius.all(Radius.circular(12))
                      ),
                      child: Center(child: Text("BMI: "+main_result.text,style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold,color: Colors.white),)),
                    ),
                  ),
                  SizedBox(
                    height: 80,
                  ),
                  Center(child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            height: 50,
                            width: 50,
                            decoration: BoxDecoration(
                                color: Color(0xFF87B1D9),
                                border: Border.all(
                                  color: Colors.black,
                                ),
                                borderRadius: BorderRadius.all(Radius.circular(12))
                            ),
                          ),
                          Text("Underweight",style: TextStyle(fontSize: 15),)
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            height: 50,
                            width: 50,
                            decoration: BoxDecoration(
                                color: Color(0xFF3DD365),
                                border: Border.all(
                                  color: Colors.black,
                                ),
                                borderRadius: BorderRadius.all(Radius.circular(12))
                            ),
                          ),
                          Text("Normal",style: TextStyle(fontSize: 15),)
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            height: 50,
                            width: 50,
                            decoration: BoxDecoration(
                                color: Color(0xFFEEE133),
                                border: Border.all(
                                  color: Colors.black,
                                ),
                                borderRadius: BorderRadius.all(Radius.circular(12))
                            ),
                          ),
                          Text("Overweight",style: TextStyle(fontSize: 15),)
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            height: 50,
                            width: 50,
                            decoration: BoxDecoration(
                                color: Color(0xFFFD802E),
                                border: Border.all(
                                  color: Colors.black,
                                ),
                                borderRadius: BorderRadius.all(Radius.circular(12))
                            ),
                          ),
                          Text("obese",style: TextStyle(fontSize: 15),)
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            height: 50,
                            width: 50,
                            decoration: BoxDecoration(
                                color: Color(0xFFF95353),
                                border: Border.all(
                                  color: Colors.black,
                                ),
                                borderRadius: BorderRadius.all(Radius.circular(12))
                            ),
                          ),
                          Text("Extreme",style: TextStyle(fontSize: 15),)
                        ],
                      )
                    ],
                  ),)

                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Step 3: Code main.dart file to use the calculator.dart file

Dart

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

void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          brightness: Brightness.light,
          primaryColor: Colors.blue
      ),
      home: BMICalculator(),
    );
  }
}

Step 4: Run the App and use

Then Run this App on your local Android Devise by using USB or a Virtual mobile phone. 

Output: 

Output Demo