Flutter BMI & Health Calculator
Build a simple Flutter app that calculates your body mass index (BMI) from your height and weight and shows what it means: the number, the category (underweight, normal, overweight or obese) on a colored card, and the healthy weight range for your height. It supports both metric (cm and kg) and imperial (feet, inches and pounds) units, checks the input so impossible values are refused, and includes a short note that BMI is only a rough guide. It's a perfect first Flutter app: you'll learn widgets and layouts, text fields and forms with validation, StatefulWidget and setState, simple calculations, and theming.
- Estimate
- ~6h
- Steps
- 6
- Completed by
- 0
- Proposed by
- codeseed.app
Flutter · Material widgets
Project roadmap
- 01
Create the app
~0.5hInstall Flutter and create a project with flutter create bmi_calculator. Replace the sample code with a MaterialApp and a single home screen with a title in the app bar. Run it on an emulator or your phone. Done when: the app starts and shows your home screen.
- 02
Add the input fields
~1.5hAdd a Form with text fields for height and weight using number keyboards, and a toggle between metric and imperial units (showing feet and inches fields for imperial height). Validate each field: required, a number, and within a sensible range (for example 50 to 250 cm and 20 to 300 kg), with clear messages under the fields. Done when: invalid values show error messages, and the unit toggle switches the fields.
- 03
Calculate the BMI
~1hWrite a separate Dart function that converts imperial values to metric, calculates BMI as weight in kg divided by height in meters squared, and returns the category using the standard thresholds (under 18.5, 18.5 to 24.9, 25 to 29.9, and 30 or more). Also calculate the healthy weight range for the height. Done when: the function gives the right results for a few examples you calculate by hand.
- 04
Show the result
~1hWhen the Calculate button is pressed and the form is valid, show a card with the BMI rounded to one decimal, the category in a color (for example blue, green, orange and red), the healthy weight range in the chosen units, and a short note that BMI doesn't account for muscle, age or body shape. Use setState to update the screen. Done when: pressing Calculate shows the correct colored result.
- 05
Polish the app
~1hApply a theme with your own colors, improve spacing and alignment, make the layout scroll on small screens, and add a Reset button that clears the fields and the result. Remember the chosen unit system with shared_preferences. Done when: the app looks tidy on a small and a large phone, and Reset clears everything.
- 06
Test it
~1hWrite unit tests for the BMI function (each category boundary, such as 18.5 and 25, and unit conversion), and a widget test that enters values, taps Calculate and checks the result text. Done when: flutter test passes.
Ready to build this?
Get a GitHub repo and start building. Your AI reviewer checks each step as you go.
Tech stack