Membuat aplikasi BMI
## 📱 Belajar Flutter: Membuat Aplikasi BMI dengan Status Ideal / Tidak Ideal
berikut link aplikasi jika ingin mencoba nya:
https://zk10006h2k101.zapp.page/#/
Halo semuanya 👋
Di postingan kali ini aku mau sharing hasil belajar Flutter dengan membuat **aplikasi BMI (Body Mass Index)** sederhana tapi cukup lengkap.
Aplikasi ini aku buat sebagai latihan untuk memahami **form input, state management, dan logika perhitungan di Flutter**. Walaupun simpel, project ini lumayan membantu buat memahami dasar-dasar Flutter.
berikut kode aplikasi yang saya buat:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: BmiPage(),
);
}
}
class BmiPage extends StatefulWidget {
const BmiPage({super.key});
@override
State<BmiPage> createState() => _BmiPageState();
}
class _BmiPageState extends State<BmiPage> {
final TextEditingController nameController = TextEditingController();
final TextEditingController ageController = TextEditingController();
final TextEditingController heightController = TextEditingController();
final TextEditingController weightController = TextEditingController();
String gender = 'Laki-laki';
double bmi = 0;
String kategori = '';
String status = '';
void hitungBMI() {
final double? height =
double.tryParse(heightController.text);
final double? weight =
double.tryParse(weightController.text);
if (height == null || weight == null) return;
setState(() {
bmi = weight / ((height / 100) * (height / 100));
if (bmi < 18.5) {
kategori = 'Kurus';
status = 'Tidak Ideal ❌';
} else if (bmi < 25) {
kategori = 'Normal';
status = 'Ideal ✅';
} else if (bmi < 30) {
kategori = 'Gemuk';
status = 'Tidak Ideal ❌';
} else {
kategori = 'Obesitas';
status = 'Tidak Ideal ❌';
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
title: const Text('BMI Calculator 💖'),
centerTitle: true,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
children: [
TextField(
controller: nameController,
decoration: const InputDecoration(
labelText: 'Nama',
),
),
const SizedBox(height: 10),
DropdownButtonFormField<String>(
value: gender,
decoration: const InputDecoration(
labelText: 'Jenis Kelamin',
),
items: const [
DropdownMenuItem(
value: 'Laki-laki',
child: Text('Laki-laki'),
),
DropdownMenuItem(
value: 'Perempuan',
child: Text('Perempuan'),
),
],
onChanged: (value) {
setState(() {
gender = value!;
});
},
),
const SizedBox(height: 10),
TextField(
controller: ageController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Umur',
),
),
const SizedBox(height: 10),
TextField(
controller: heightController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Tinggi Badan (cm)',
),
),
const SizedBox(height: 10),
TextField(
controller: weightController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Berat Badan (kg)',
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: hitungBMI,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.pinkAccent,
),
child: const Text('Hitung BMI'),
),
const SizedBox(height: 25),
if (bmi > 0)
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Nama: ${nameController.text}'),
Text('Jenis Kelamin: $gender'),
Text('Umur: ${ageController.text} tahun'),
const SizedBox(height: 10),
Text(
'BMI: ${bmi.toStringAsFixed(1)}',
style: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
Text(
'Kategori: $kategori',
style: const TextStyle(fontSize: 18),
),
Text(
'Status: $status',
style: TextStyle(
fontSize: 18,
color: status.contains('Ideal')
? Colors.green
: Colors.red,
),
),
],
),
],
),
),
);
}
}
---
## ✨ Fitur Aplikasi BMI
Di aplikasi ini, pengguna bisa mengisi beberapa data, seperti:
* Nama
* Jenis kelamin
* Umur
* Tinggi badan (cm)
* Berat badan (kg)
Setelah data diisi dan tombol **Hitung BMI** ditekan, aplikasi akan menampilkan:
* Nilai BMI
* Kategori BMI (Kurus, Normal, Gemuk, Obesitas)
* Status **Ideal atau Tidak Ideal**
* Informasi data pengguna
---
## 🧠 Cara Kerja BMI
Perhitungan BMI menggunakan rumus berikut:
**BMI = Berat Badan (kg) / (Tinggi Badan (m) × Tinggi Badan (m))**
Dari hasil BMI tersebut, aplikasi akan menentukan apakah berat badan pengguna termasuk **ideal atau tidak ideal**.
BMI normal (18.5 – 24.9) dianggap **Ideal**, sedangkan kategori lainnya dianggap **Tidak Ideal**.
---
## 🛠 Teknologi yang Digunakan
Aplikasi ini dibuat menggunakan:
* Flutter
* Bahasa pemrograman Dart
Beberapa widget dan konsep yang digunakan antara lain:
* `StatefulWidget`
* `TextField`
* `DropdownButtonFormField`
* `ElevatedButton`
* `setState()` untuk memperbarui tampilan
---
## 🎨 Tampilan Aplikasi
Untuk tampilan, aplikasi dibuat dengan desain sederhana dan warna pink agar terlihat lebih menarik dan tidak membosankan. Fokus utama dari project ini adalah **fungsi dan logika aplikasi**, sehingga tampilannya tetap simpel dan mudah dipahami.
---
## 📝 Penutup
Dari project ini, aku belajar banyak hal, seperti:
* Cara mengelola input pengguna di Flutter
* Menghubungkan logika perhitungan dengan UI
* Menentukan kategori dan status dari hasil perhitungan
Project ini masih bisa dikembangkan lebih lanjut, misalnya dengan:
* Menambahkan saran berat badan ideal
* Memisahkan halaman input dan halaman hasil
* Memperbaiki desain UI agar lebih modern
Semoga sharing ini bisa bermanfaat buat teman-teman yang juga sedang belajar Flutter 🚀
Terima kasih sudah membaca 😊
---
Kalau mau, aku juga bisa:
* ✍️ Menyesuaikan jadi **lebih santai lagi (aku–kamu)**
* 🎓 Versi **tugas kuliah / laporan**
* 🧩 Ditambah **penjelasan kode per bagian**
Tinggal bilang ya 😉✨
Komentar
Posting Komentar