Create a BMI Calculator App using Flutter | Beginner Flutter Project

In this blog post, we’ll guide you through creating a BMI calculator app using Flutter, a popular framework for building beautiful, native interfaces for mobile, web, desktop, and embedded devices.

The app will allow users to:

  • Select their gender (male or female)
  • Input their height using a slider
  • Input their weight using stepper buttons
  • Calculate their BMI by clicking a button

If you prefer watching a video tutorial here is a link to that.

Getting Started

1. Create a new Flutter project:

  • Open Android Studio and choose “New Flutter Project”.
  • Name your project and select the Flutter SDK path.

2. Add the itemCount dependency:

  • Item_count_number_button dependency is required for the stepper buttons used to input weight. You can find the link to the package in the video description below the blog post.
  • In your pubspec.yaml file, add the following line under the dependencies section: 
dependencies:
  flutter:
    sdk: flutter
  item_count_number_button: ^1.9.2

To download the dependency click here.

Run flutter pub get to get the depedency.

flutter pub get

Building the User Interface (UI)

1. Create the State Class:

  • This code defines a Flutter class named “HomePage” that inherits from “StatefulWidget”. It allows the HomePage to have a dynamic UI that can change. The _HomePageState class will manage that dynamic behavior.
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

1. App Bar:

  • Within the build function, return a Scaffold widget.
  • Set the appBar property of the Scaffold to an AppBar widget with a centered title “BMI Calculator”.
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      centerTitle: true,
      title: const Text("BMI Calculator"),
    ),
    ...
  );
}

2. Body with Column:

  • Set the body property of the Scaffold to a Column widget. This positions elements vertically.
Widget _buildUI() {
  return Column(
    children: [
      _genderSelector(),
      _heightInput(),
      _weightAndAgeInputRow(),
      _bmiResult(),
    ],
  );
}

Gender Selection

1. Gender Selector Function:

  • Define a function called genderSelector that returns a Container widget.
Widget _genderSelector() {
  return Container(
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.primaryContainer,
      borderRadius: BorderRadius.circular(
        15,
      ),
    ),
    margin: const EdgeInsets.all(
      10.0,
    ),
    padding: EdgeInsets.symmetric(
      vertical: 10.0,
    ),
    ...
  );
}

2. Container with Row:

  • The Container will house the gender selection elements and have a blue background by default (depending on selected gender).
  • Nest a Row widget inside the Container to arrange the buttons horizontally.
 child: Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  ...
),

3. Icon Buttons:

  • Create two IconButton widgets within the Row, one for male and one for female.
  • Set the icon property of each button to the appropriate gender icon.
  • Assign an onPressed function to handle gender selection.
  • Use a conditional statement to change the icon color based on the selected gender.
children: [
  Column(
    children: [
      IconButton(
        iconSize: 60,
        onPressed: () {
          setState(() {
            _selectedGender = 0;
          });
        },
        icon: Icon(
          Icons.male,
          color: _selectedGender == 0
              ? Theme.of(context).colorScheme.primary
              : Colors.black,
        ),
      ),
      const Text(
        "Male",
        style: TextStyle(
          fontSize: 25,
        ),
      ),
    ],
  ),
  Column(
    children: [
      IconButton(
        iconSize: 60,
        onPressed: () {
          setState(() {
            _selectedGender = 1;
          });
        },
        icon: Icon(
          Icons.female,
          color: _selectedGender == 1
              ? Theme.of(context).colorScheme.primary
              : Colors.black,
        ),
      ),
      const Text(
        "Female",
        style: TextStyle(
          fontSize: 25,
        ),
      ),
    ],
  )

Height Input

1. Height Input Function:

  • Define a function called heightInput that returns a Container widget (same styling as gender selector).
Widget _heightInput() {
  return Container(
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.primaryContainer,
      borderRadius: BorderRadius.circular(
        15,
      ),
    ),
    margin: const EdgeInsets.all(
      10.0,
    ),
    padding: EdgeInsets.symmetric(
      vertical: 10.0,
    ),
  );
}

2. Column for Height Display and Slider:

  • Nest a Column widget inside the Container.
  • Add a Text widget to display the current height.
child: Column(
  children: [
    const Text(
      "Height",
      style: TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
      ),
    ),
    ...
  ],
),

3. Slider for Height Selection:

  • Add a Slider widget to allow users to adjust their height.
  • Set the value property to the current height variable.
  • Implement the onChanged callback to update the height variable when the slider is moved.
Slider(
  min: 0,
  max: 300,
  divisions: 300,
  value: _height.toDouble(),
  onChanged: (value) {
    setState(
      () {
        _height = value.toInt();
      },
    );
  },
),

4. Text Widget for Height Value:

  • Add another Text widget to display the current height value with units (cm).
Text(
  "$_height cm",
  style: const TextStyle(
    fontSize: 20,
  ),
)

Weight and Age Input

1. Weight and Age Input Row Function:

  • Define a function called weightAndAgeInputRow that returns a Row widget.
Widget _weightAndAgeInputRow() {
  return Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.center,
    ...
  );
}

2. Row for Weight and Age Input:

  • This Row will hold the weight and age input widgets.
children: [
  _weightInput(),
  _ageInput(),
],

3. Weight Input Function:

  • Define a function called weightInput that returns a Container widget (same styling).
Widget _weightInput() {
  return Container(
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.primaryContainer,
      borderRadius: BorderRadius.circular(
        15,
      ),
    ),
    margin: const EdgeInsets.all(
      10.0,
    ),
    padding: EdgeInsets.symmetric(
      vertical: 10.0,
      horizontal: 10.0,
    ),
    ...
  );
}

4. Weight Display and Stepper Buttons:

  • Similar to height input, create a Text widget to display weight and ItemCount widgets (stepper buttons) to adjust weight.
child: Column(
  children: [
    const Text(
      "Weight",
      style: TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
      ),
    ),
    ItemCount(
      buttonSizeHeight: 30,
      buttonSizeWidth: 60,
      initialValue: _weight,
      minValue: 50,
      maxValue: 350,
      onChanged: (value) {
        setState(() {
          _weight = value.toInt();
        });
      },
      decimalPlaces: 0,
    ),
  ],
),

5. Age Input Function:

  • Define a function called ageInput similar to weightInput.
  • Use the ItemCount widget for age input as well.
Widget _ageInput() {
  return Container(
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.primaryContainer,
      borderRadius: BorderRadius.circular(
        15,
      ),
    ),
    margin: const EdgeInsets.all(
      10.0,
    ),
    padding: EdgeInsets.symmetric(
      vertical: 10.0,
      horizontal: 10.0,
    ),
    child: Column(
      children: [
        const Text(
          "Age",
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold,
          ),
        ),
        ItemCount(
          buttonSizeHeight: 30,
          buttonSizeWidth: 60,
          initialValue: _age,
          minValue: 1,
          maxValue: 100,
          onChanged: (value) {
            setState(() {
              _age = value.toInt();
            });
          },
          decimalPlaces: 0,
        ),
      ],
    ),
  );
}

BMI Result

1. BMI Result Function:

  • Define a function called bmiResult that returns a Container widget (same styling).
Widget _bmiResult() {
  return Container(
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.primaryContainer,
      borderRadius: BorderRadius.circular(
        15,
      ),
    ),
    margin: const EdgeInsets.all(
      10.0,
    ),
    padding: EdgeInsets.symmetric(
      vertical: 10.0,
      horizontal: 10.0,
    ),
    ...
  );
}

2.Text Widget for BMI Display:

  • Nest a Text widget inside the Container to show the calculated BMI.
  • Use string interpolation to display the BMI value.
child: Text(
  "BMI: ${_bmi.toStringAsFixed(1)}",
  style: TextStyle(
    fontSize: 25,
    fontWeight: FontWeight.bold,
  ),
),

Calculating BMI

1. Button for Calculation:

  • Add an ElevatedButton widget below the BMI result section.
  • Set the onPressed property of the button to calculate the BMI.
  • Implement the BMI formula: BMI = weight (kg) / height^2 (m).
floatingActionButton: FloatingActionButton(
  onPressed: () {
    setState(() {
      _bmi = _weight / pow(_height / 100, 2);
    });
  },
  child: const Icon(
    Icons.calculate,
  ),
),

Get Source Source for free:

Source Code

Conclusion

This guide provides a basic structure for building a BMI app in Flutter. You can further enhance the app by:

  • Implementing a reset button to clear user input.
  • Adding visual cues for different BMI ranges (color change based on interpretation).
  • Displaying additional health information based on the BMI interpretation.
  • Implementing unit conversion for weight and height (kg/lb, cm/ft).

Happy Coding…!

Related Posts:

Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Posts

Categories

Tags

flutter animation flutter animations lottie flutter animation tutorial flutter lottie flutter lottie animation flutter lottie animations flutter lottie example how to use lottie in flutter lottie animation lottie animation flutter lottie animation in flutter lottie animations flutter lottie animations in flutter lottie flutter lottie flutter example lottie flutter package lottie in flutter