Membuat Aplikasi BMI Calculator Modern Menggunakan Flutter
📱 Membuat Aplikasi BMI Calculator Modern Menggunakan Flutter
Di era perkembangan teknologi mobile yang semakin pesat, membuat aplikasi kesehatan sederhana bisa menjadi salah satu cara yang menarik untuk belajar pemrograman. Salah satu contohnya adalah BMI Calculator, yaitu aplikasi yang dapat menghitung Indeks Massa Tubuh berdasarkan tinggi dan berat badan pengguna.
Pada project kali ini, aplikasi dibuat menggunakan Flutter dan bahasa pemrograman Dart. Aplikasi memiliki tampilan modern dengan tema gelap serta slider untuk memasukkan tinggi dan berat badan.
🚀 Apa Itu BMI Calculator?
BMI (Body Mass Index) atau Indeks Massa Tubuh (IMT) adalah nilai yang dihitung berdasarkan berat dan tinggi badan. Dalam aplikasi ini, BMI digunakan sebagai hasil perhitungan sederhana yang kemudian dikelompokkan menjadi beberapa kategori.
Rumus yang digunakan:
BMI = Berat Badan (kg) ÷ (Tinggi Badan (m) × Tinggi Badan (m))
Contohnya:
Tinggi = 170 cm
Berat = 60 kg
Maka:
BMI = 60 ÷ (1,7 × 1,7) = 20,8
Aplikasi kemudian menampilkan nilai BMI dan kategori hasilnya.
Catatan: BMI merupakan indikator sederhana dan bukan diagnosis medis. Untuk penilaian kesehatan yang lebih tepat, diperlukan pertimbangan faktor lain dan konsultasi dengan tenaga kesehatan.
🛠️ Teknologi yang Digunakan
Project ini dibuat menggunakan beberapa teknologi utama:
| Teknologi | Fungsi |
|---|---|
| Flutter | Framework untuk membuat aplikasi mobile |
| Dart | Bahasa pemrograman Flutter |
| Material Design | Komponen dan desain antarmuka |
| StatefulWidget | Mengatur perubahan data pada halaman |
| Slider | Memasukkan nilai tinggi dan berat |
| AlertDialog | Menampilkan hasil BMI |
Flutter memungkinkan developer membuat aplikasi dengan tampilan yang menarik menggunakan satu basis kode.
🎨 Tampilan Aplikasi
Aplikasi menggunakan konsep dark mode dengan warna dasar gelap #0A0E21.
Pada halaman utama terdapat:
AppBar dengan judul "Modern BMI Calculator".
Card untuk memasukkan tinggi badan.
Card untuk memasukkan berat badan.
Slider untuk mengubah nilai.
Tombol HITUNG BMI.
Dialog yang menampilkan hasil BMI.
Penggunaan warna pink pada tombol dan slider membuat tampilan menjadi lebih modern dan menarik.
📂 Struktur Dasar Program
Program dimulai dengan fungsi:
void main() => runApp(const BMICalculatorApp());
Fungsi tersebut menjalankan aplikasi Flutter dengan widget BMICalculatorApp.
Kemudian aplikasi menggunakan:
class BMICalculatorApp extends StatelessWidget
Widget ini bertugas mengatur konfigurasi awal aplikasi, seperti tema dan halaman utama.
Halaman utama menggunakan:
class BMIPage extends StatefulWidget
StatefulWidget digunakan karena nilai tinggi dan berat badan dapat berubah ketika pengguna menggeser slider.
📏 Input Tinggi dan Berat Badan
Pada program terdapat dua variabel utama:
double height = 170;
double weight = 60;
Nilai awal tinggi badan adalah 170 cm, sedangkan berat badan adalah 60 kg.
Pengguna dapat mengubah kedua nilai tersebut melalui slider.
Untuk tinggi badan, rentang yang tersedia adalah:
100–220 cm
Sedangkan berat badan memiliki rentang:
30–150 kg
🎚️ Menggunakan Slider
Salah satu bagian menarik dari aplikasi ini adalah penggunaan Slider.
Contohnya:
Slider(
value: val,
min: min,
max: max,
onChanged: onChanged,
activeColor: Colors.pinkAccent,
)
Ketika slider digeser, nilai tinggi atau berat akan berubah secara langsung.
Program menggunakan:
setState()
agar tampilan aplikasi diperbarui ketika pengguna mengubah nilai.
🧮 Proses Perhitungan BMI
Perhitungan BMI terdapat pada fungsi:
void _showResult()
Rumus yang digunakan dalam program adalah:
double bmi = weight / ((height / 100) * (height / 100));
Karena tinggi yang dimasukkan menggunakan satuan centimeter, maka tinggi terlebih dahulu dibagi 100 agar menjadi meter.
Contohnya:
170 cm ÷ 100 = 1,7 meter
Kemudian nilai tersebut digunakan dalam rumus BMI.
📊 Kategori Hasil BMI
Program juga memiliki kondisi untuk menentukan status hasil BMI:
String status = bmi < 18.5
? "Underweight"
: bmi < 25
? "Normal"
: "Overweight";
Secara sederhana, program membagi hasil menjadi:
| Nilai BMI | Status |
|---|---|
| < 18,5 | Underweight |
| 18,5 – <25 | Normal |
| ≥25 | Overweight |
Perlu diperhatikan bahwa batas tersebut merupakan kategori sederhana yang digunakan oleh program dan tidak selalu cocok untuk semua orang, misalnya anak/remaja atau kondisi tertentu.
💬 Menampilkan Hasil dengan AlertDialog
Setelah tombol HITUNG BMI ditekan, aplikasi akan menampilkan sebuah dialog.
Bagian ini menggunakan:
showDialog(
context: context,
builder: (_) => AlertDialog(
Hasil BMI kemudian ditampilkan menggunakan:
bmi.toStringAsFixed(1)
Artinya, nilai BMI akan ditampilkan dengan satu angka di belakang koma.
Misalnya:
20.8
Selain nilai BMI, aplikasi juga menampilkan status seperti:
Normal
Dengan demikian, pengguna dapat langsung mengetahui hasil perhitungan.
🧩 Fungsi _buildCard()
Program juga memiliki fungsi:
Widget _buildCard(
String label,
double val,
Function(double) onChanged,
double min,
double max
)
Fungsi tersebut digunakan untuk membuat card input tinggi dan berat badan.
Keuntungan menggunakan fungsi ini adalah kode menjadi lebih ringkas dan terstruktur, karena komponen yang memiliki desain serupa tidak perlu ditulis berulang kali.
Card memiliki:
Judul input
Nilai angka
Slider
Background gelap
Sudut yang membulat
🖥️ Alur Kerja Aplikasi
Secara sederhana, alur aplikasi dapat digambarkan seperti berikut:
┌─────────────────┐
│ Pengguna │
└────────┬────────┘
│
▼
┌───────────────────┐
│ Masukkan Tinggi │
│ dan Berat Badan │
└─────────┬─────────┘
│
▼
┌───────────────────┐
│ Tombol Hitung │
│ BMI │
└─────────┬─────────┘
│
▼
┌───────────────────┐
│ Perhitungan BMI │
└─────────┬─────────┘
│
▼
┌───────────────────┐
│ Menentukan Status │
│ BMI │
└─────────┬─────────┘
│
▼
┌───────────────────┐
│ Menampilkan Hasil │
│ BMI + Status │
└───────────────────┘
🌟 Kelebihan Aplikasi
Beberapa kelebihan dari aplikasi BMI Calculator ini adalah:
1. Tampilan Modern
Penggunaan dark mode, card, slider, dan warna pink membuat aplikasi terlihat sederhana tetapi modern.
2. Mudah Digunakan
Pengguna tidak perlu mengetik angka secara manual karena tinggi dan berat dapat dipilih melalui slider.
3. Ringan
Aplikasi hanya melakukan perhitungan sederhana sehingga tidak membutuhkan database atau koneksi internet untuk fungsi utamanya.
4. Cocok untuk Belajar Flutter
Project ini cocok bagi pemula karena mempelajari beberapa konsep penting Flutter seperti:
StatelessWidgetStatefulWidgetsetState()SliderContainerColumnAlertDialogElevatedButton
🔧 Kekurangan dan Pengembangan Selanjutnya
Walaupun sudah dapat digunakan, aplikasi ini masih bisa dikembangkan menjadi lebih lengkap.
Beberapa fitur yang dapat ditambahkan antara lain:
👤 Input nama pengguna
📋 Riwayat hasil BMI
📊 Grafik perkembangan BMI
💾 Penyimpanan data
🔄 Tombol reset
🎨 Pilihan tema terang dan gelap
📱 Responsive design
🔔 Notifikasi
📝 Informasi mengenai BMI
🧑⚕️ Informasi kesehatan yang lebih lengkap
Dengan penambahan fitur tersebut, aplikasi dapat berkembang dari sekadar project pembelajaran menjadi aplikasi yang memiliki fitur lebih lengkap.
📚 Kesimpulan
Membuat Modern BMI Calculator menggunakan Flutter merupakan project yang cukup sederhana tetapi sangat baik untuk mempelajari dasar-dasar pengembangan aplikasi mobile.
Melalui project ini, kita dapat belajar bagaimana membuat tampilan menggunakan Flutter, menerima input dari pengguna, mengubah data secara real-time menggunakan setState(), melakukan perhitungan menggunakan Dart, serta menampilkan hasil menggunakan AlertDialog.
Project ini juga menunjukkan bahwa membuat aplikasi mobile tidak selalu harus dimulai dari sesuatu yang kompleks. Dengan memahami konsep dasar seperti widget, state, input, proses, dan output, kita sudah dapat membuat aplikasi yang dapat digunakan secara langsung.
Flutter + Dart + kreativitas = satu langkah awal menjadi Mobile Developer! 🚀📱
#Flutter #Dart #MobileDevelopment #BMI #AppDevelopment #Programming #Coding #BelajarFlutter
Komentar
Posting Komentar