Are you looking to build a complete BMI Calculator app using Flutter in Android Studio? This tutorial and source code guide will walk you through creating a multi-screen Flutter app that not only calculates Body Mass Index (BMI) but also teaches you essential concepts such as Flutter routes, Navigator, Dart enums, ternary operators, and more. Whether you’re a Flutter beginner or looking to improve your app development skills, this project is the perfect foundation.
What is a BMI Calculator App?
A BMI Calculator is a simple health tool that calculates a user’s Body Mass Index based on their height and weight. The result indicates if the user is underweight, normal, overweight, or obese, helping users monitor their fitness and health.
Why Build a BMI Calculator in Flutter?
Creating a BMI Calculator in Flutter is an excellent project to enhance your UI and logic-building skills. Here’s what you’ll learn:
- How to use Flutter Routes and Navigator to manage multiple screens.
- Implementing GestureDetector to capture user interaction.
- Working with Dart enums, ternary operators, and widget inheritance.
- Understanding the difference between `const` and `final` in Dart.
- Passing functions as parameters and fields.
Key Features of This Flutter BMI Calculator App
- Multi-screen navigation using Flutter `Navigator.push()`
- Reusable and modular Flutter widgets
- Highly customizable UI and responsive design
- Real-time BMI calculation logic
- Clean Material Design UI
- Support for both portrait and landscape modes
Screens in the BMI Calculator App
This app includes the following screens:
1. Welcome/Home Screen
- Introduction to the app
- Button to navigate to the calculator screen
2. Input Screen
- Input fields for height and weight
- Option to select gender (Male/Female) using `GestureDetector`
- Calculate button with logic execution
3. Result Screen
- Displays calculated BMI
- Text showing health advice and category
- Option to go back or recalculate
Flutter Navigation with Routes and Navigator
One of the most important lessons in this project is learning how to navigate between multiple screens using:
“`dart
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ResultPage()),
);
“`
You’ll also learn to define named routes using Flutter’s routing table for better scalability in large projects.
Dart Enums and Ternary Operators
Enums are used to manage the selected gender like so:
“`dart
enum Gender { male, female }Gender selectedGender;
“`
Ternary operators simplify widget logic. For example:
“`dart
color: selectedGender == Gender.male ? activeColor : inactiveColor,
“`
This approach improves readability and performance while reducing lines of code.
Difference Between `const` and `final`
In Flutter, understanding when to use `const` and `final` is critical. This app includes examples like:
“`dart
final double height = 180.0;
const double minHeight = 120.0;
“`
You’ll learn how `const` is used at compile-time and `final` at runtime, making your app more efficient.
Passing Functions as Parameters
Functions can be passed as parameters to widgets to enhance modularity. For example:
“`dart
ReusableCard(
onPress: () {
setState(() {
selectedGender = Gender.male;
});
},
)
“`
This concept allows you to keep your UI and logic separate for cleaner code.
Tools & Technologies Used
- Flutter SDK
- Dart Language
- Android Studio
- Material Design Widgets
- Custom Dart classes and enums
Download BMI Calculator Flutter Source Code
You can download the full source code of the BMI Calculator Flutter app by clicking the link below:
The code is clean, beginner-friendly, and includes comments for every essential part. It’s ideal for developers looking to learn Flutter concepts through real-world projects.
Learning Outcomes
By the end of this project, you will understand:
- How to create multi-page apps using Flutter Navigator
- Using `GestureDetector` to handle touch interactions
- Effective use of Dart enums and `const` vs. `final`
- Widget Inheritance and reusable components
- Passing functions as arguments to widgets
- Applying custom styles for interactive components
How to Run the App in Android Studio
- Download and extract the source code zip
- Open Android Studio and click to clone GitHub
- Navigate to the project folder and open it
- Connect an Android device or start an emulator
- Run the app by clicking the green Run button
- Let Android Studio download dependencies by running.
“`bash
flutter pub get
“`
Conclusion
Creating a BMI Calculator App using Flutter in Android Studio is an excellent way to master multi-screen navigation, widget management, and Dart programming fundamentals. You not only gain hands-on experience but also build a complete app ready for customization and further development.
Start with the provided source code, explore the logic, and tweak it to make it your own. This is the ideal project for developers aiming to improve their Flutter app development skills.
