Kupas Tuntas Pembuatan BMI calculator
Bikin Aplikasi Sendiri: Kupas Tuntas Pembuatan BMI Calculator dengan Flutter
1. Pengertian BMI Calculator
BMI Calculator (Body Mass Index Calculator) adalah sebuah aplikasi atau alat digital yang digunakan untuk menghitung Indeks Massa Tubuh (IMT) seseorang berdasarkan berat badan dan tinggi badan yang dimilikinya. Aplikasi ini berfungsi sebagai indikator awal untuk mengetahui apakah berat badan seseorang berada dalam kisaran normal, kurang, berlebih, atau mengalami obesitas.
2. Cara Kerja dan Rumus BMI
Secara matematis, perhitungan Indeks Massa Tubuh menggunakan rumus standar internasional (untuk satuan metrik):
$$\text{BMI} = \frac{\text{Berat Badan (kg)}}{\text{Tinggi Badan (m)}^2}$$
Kategori standar hasil perhitungan BMI berdasarkan Organisasi Kesehatan Dunia (WHO) meliputi:
- Kekurangan berat badan (Underweight): Di bawah 18.5
- Berat badan normal (Normal weight): 18.5 – 24.9
- Kelebihan berat badan (Overweight): 25.0 – 29.9
- Obesitas (Obesity): 30.0 atau lebih
3. Fitur Utama Aplikasi BMI Calculator
Sebuah aplikasi BMI Calculator yang baik umumnya dilengkapi dengan beberapa fitur berikut:
- Input Data Fisik: Kolom pengisian berat badan dan penggeser (slider) tinggi badan.
- Kalkulator Otomatis: Tombol hitung yang langsung memproses rumus secara instan begitu data dimasukkan.
- Indikator Kategori & Saran Kesehatan: Menampilkan status berat badan pengguna beserta kategori kesehatannya.
- Penyimpanan Lokal (History): Menyimpan catatan hasil perhitungan agar pengguna dapat memantau perubahan berat badan.
4. Teknologi Pembuatan dengan Flutter
Dalam pengembangan aplikasi ini, teknologi Flutter digunakan karena kemampuannya membuat aplikasi untuk Android dan iOS sekaligus menggunakan satu bahasa pemrograman (Dart).
- UI Components: Memanfaatkan Stateless dan StatefulWidget untuk mengubah tampilan hasil secara real-time.
- Logika Pemrograman: Mengimplementasikan fungsi matematika sederhana di dalam bahasa Dart untuk mengkalkulasi data input pengguna.
5. Hasil Bedah Aplikasi: BMI Calculator
Berikut adalah hasil bedah rancangan fungsional dari aplikasi BMI Calculator:
- Tampilan Aplikasi: Antarmuka bersih (clean UI), menggunakan kartu (card) gelap interaktif serta slider untuk mengatur tinggi badan dan tombol tambah-kurang untuk berat badan.
- Data yang Disimpan: Nilai angka berat badan, tinggi badan, serta hasil kategori BMI pengguna.
- Kebutuhan Internet: Rendah / Tidak Wajib. Aplikasi ini murni melakukan kalkulasi lokal di perangkat (client-side).
- Cara Login: Tidak memerlukan login agar ramah privasi dan bisa langsung digunakan.
- Database: Menggunakan penyimpanan memori state aplikasi secara lokal.
- Diagram Alur Sederhana:
Plaintext
User Input (Berat & Tinggi) → Mobile App (Kalkulasi Rumus BMI) → Tampilan Hasil & Kategori
6. Kode Pemrograman (DartPad Ready)
Berikut adalah kode lengkap aplikasi BMI Calculator menggunakan Flutter yang dapat Anda salin dan jalankan langsung di DartPad
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const BMICalculatorApp());
}
class BMICalculatorApp extends StatelessWidget {
const BMICalculatorApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'BMI Calculator',
theme: ThemeData(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: const Color(0xFF0A0E21),
),
home: const BMIHomePage(),
);
}
}
class BMIHomePage extends StatefulWidget {
const BMIHomePage({super.key});
@override
State<BMIHomePage> createState() => _BMIHomePageState();
}
class _BMIHomePageState extends State<BMIHomePage> {
int height = 170; // dalam cm
int weight = 65; // dalam kg
double? bmiResult;
String bmiCategory = '';
void calculateBMI() {
double heightInMeters = height / 100;
setState(() {
bmiResult = weight / (heightInMeters * heightInMeters);
if (bmiResult! < 18.5) {
bmiCategory = 'Kekurangan berat badan (Underweight)';
} else if (bmiResult! >= 18.5 && bmiResult! <= 24.9) {
bmiCategory = 'Berat badan normal (Normal)';
} else if (bmiResult! >= 25.0 && bmiResult! <= 29.9) {
bmiCategory = 'Kelebihan berat badan (Overweight)';
} else {
bmiCategory = 'Obesitas (Obese)';
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BMI CALCULATOR', style: TextStyle(color: Colors.white)),
backgroundColor: const Color(0xFF1D1E33),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Card Tinggi Badan
Expanded(
child: Container(
decoration: BoxDecoration(
color: const Color(0xFF1D1E33),
borderRadius: BorderRadius.circular(10),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('TINGGI', style: TextStyle(color: Colors.white70, fontSize: 18)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text('$height', style: const TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold)),
const Text(' cm', style: TextStyle(color: Colors.white70, fontSize: 18)),
],
),
Slider(
value: height.toDouble(),
min: 100,
max: 220,
activeColor: Colors.deepOrange,
inactiveColor: Colors.grey,
onChanged: (double newValue) {
setState(() {
height = newValue.round();
});
},
),
],
),
),
),
const SizedBox(height: 15),
// Card Berat Badan
Expanded(
child: Container(
decoration: BoxDecoration(
color: const Color(0xFF1D1E33),
borderRadius: BorderRadius.circular(10),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('BERAT BADAN', style: TextStyle(color: Colors.white70, fontSize: 18)),
Text('$weight kg', style: const TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold)),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: 'minus',
backgroundColor: const Color(0xFF4C4F5E),
onPressed: () {
setState(() {
if (weight > 10) weight--;
});
},
child: const Icon(Icons.remove, color: Colors.white),
),
const SizedBox(width: 15),
FloatingActionButton(
heroTag: 'plus',
backgroundColor: const Color(0xFF4C4F5E),
onPressed: () {
setState(() {
weight++;
});
},
child: const Icon(Icons.add, color: Colors.white),
),
],
),
],
),
),
),
const SizedBox(height: 15),
// Hasil BMI
if (bmiResult != null)
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: const Color(0xFF1D1E33),
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
const Text('HASIL BMI ANDA', style: TextStyle(color: Colors.greenAccent, fontWeight: FontWeight.bold)),
const SizedBox(height: 5),
Text(bmiResult!.toStringAsFixed(1), style: const TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold)),
Text(bmiCategory, style: const TextStyle(color: Colors.white70, fontSize: 14), textAlign: TextAlign.center),
],
),
),
const SizedBox(height: 15),
// Tombol Hitung
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.deepOrange,
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),
onPressed: calculateBMI,
child: const Text('HITUNG BMI', style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
}
7. Roadmap Pengembangan Aplikasi BMI Bagi Pemula
- Pelajari Dasar Bahasa Pemrograman (Minggu 1): Pahami dasar Dart untuk Flutter.
- Desain Antarmuka / UI (Minggu 2): Rancang tata letak tombol, teks, dan input field.
- Tulis Logika Matematika (Minggu 3): Masukkan rumus perhitungan BMI dan pengkondisian kategori.
- Uji Coba & Publikasi (Minggu 4): Jalankan aplikasi di perangkat Anda dan lakukan pengujian fitur secara menyeluruh.
Komentar
Posting Komentar