Membuat Aplikasi BMI dengan Flutter: Proyek Sederhana untuk Pemula
Membuat Aplikasi BMI dengan Flutter: Proyek Sederhana untuk Pemula
Pendahuluan
Jika kamu sedang belajar pengembangan aplikasi mobile menggunakan Flutter, salah satu proyek yang cocok untuk pemula adalah membuat aplikasi BMI (Body Mass Index) Calculator. Selain mudah dibuat, aplikasi ini juga membantu memahami konsep dasar Flutter seperti input data, tombol, perhitungan, dan menampilkan hasil.
Pada artikel ini, kita akan membahas cara membuat aplikasi BMI menggunakan Flutter dari konsep hingga implementasi.
Apa Itu BMI?
BMI (Body Mass Index) atau Indeks Massa Tubuh adalah metode yang digunakan untuk mengetahui apakah berat badan seseorang termasuk ideal, kurang, berlebih, atau obesitas berdasarkan tinggi dan berat badan.
Rumus BMI:
BMI = Berat Badan (kg) ÷ (Tinggi Badan (m) × Tinggi Badan (m))
Contoh:
Berat badan: 60 kg
Tinggi badan: 170 cm (1,70 m)
BMI = 60 ÷ (1,70 × 1,70)
BMI = 20,76
Hasil tersebut termasuk kategori Normal.
Mengapa Menggunakan Flutter?
Flutter adalah framework open-source yang dikembangkan oleh Google untuk membuat aplikasi Android, iOS, Web, dan Desktop dari satu basis kode.
Keunggulan Flutter:
Satu kode untuk banyak platform.
Tampilan UI modern dan menarik.
Performa tinggi.
Banyak widget siap pakai.
Cocok untuk pemula maupun profesional.
Fitur yang Akan Dibuat
Aplikasi BMI sederhana akan memiliki fitur berikut:
✅ Input berat badan
✅ Input tinggi badan
✅ Tombol hitung BMI
✅ Menampilkan hasil BMI
✅ Menampilkan kategori BMI
✅ Tampilan modern dan mudah digunakan
Desain Antarmuka (UI)
Tampilan aplikasi terdiri dari:
App Bar dengan judul "BMI Calculator".
TextField untuk berat badan.
TextField untuk tinggi badan.
Tombol "Hitung BMI".
Card untuk menampilkan hasil BMI.
Card untuk menampilkan kategori BMI.
Desain yang sederhana membuat aplikasi mudah digunakan oleh semua pengguna.
Struktur Project Flutter
Struktur sederhana project:
lib/
│
├── main.dart
│
└── bmi_screen.dart
Untuk proyek pemula, seluruh kode juga dapat ditulis langsung di file main.dart.
Membuat Tampilan Input
Flutter menyediakan widget TextField untuk menerima input pengguna.
Contoh:
TextField(
controller: beratController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Berat Badan (kg)',
border: OutlineInputBorder(),
),
)
Widget di atas digunakan untuk memasukkan berat badan.
Logika Perhitungan BMI
Langkah perhitungan:
Ambil nilai berat badan.
Ambil nilai tinggi badan.
Ubah tinggi dari cm menjadi meter.
Hitung BMI.
Tentukan kategorinya.
Tampilkan hasil.
Fungsi perhitungan:
void hitungBMI() {
double berat = double.parse(beratController.text);
double tinggi = double.parse(tinggiController.text) / 100;
double bmi = berat / (tinggi * tinggi);
setState(() {
hasilBMI = bmi.toStringAsFixed(2);
if (bmi < 18.5) {
kategori = "Berat Badan Kurang";
} else if (bmi < 25) {
kategori = "Normal";
} else if (bmi < 30) {
kategori = "Berat Badan Berlebih";
} else {
kategori = "Obesitas";
}
});
}
Membuat Tombol Hitung BMI
Gunakan widget ElevatedButton.
ElevatedButton(
onPressed: hitungBMI,
child: Text("Hitung BMI"),
)
Ketika tombol ditekan, Flutter akan menjalankan fungsi hitungBMI().
Menampilkan Hasil BMI
Gunakan widget Card agar tampil lebih menarik.
Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Text(
"BMI Anda: $hasilBMI",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
)
Kode Lengkap Flutter BMI Calculator
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: BMIScreen(),
);
}
}
class BMIScreen extends StatefulWidget {
@override
State<BMIScreen> createState() => _BMIScreenState();
}
class _BMIScreenState extends State<BMIScreen> {
final beratController = TextEditingController();
final tinggiController = TextEditingController();
String hasilBMI = "";
String kategori = "";
void hitungBMI() {
double berat = double.parse(beratController.text);
double tinggi = double.parse(tinggiController.text) / 100;
double bmi = berat / (tinggi * tinggi);
setState(() {
hasilBMI = bmi.toStringAsFixed(2);
if (bmi < 18.5) {
kategori = "Berat Badan Kurang";
} else if (bmi < 25) {
kategori = "Normal";
} else if (bmi < 30) {
kategori = "Berat Badan Berlebih";
} else {
kategori = "Obesitas";
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("BMI Calculator"),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
TextField(
controller: beratController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: "Berat Badan (kg)",
),
),
const SizedBox(height: 16),
TextField(
controller: tinggiController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: "Tinggi Badan (cm)",
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: hitungBMI,
child: const Text("Hitung BMI"),
),
const SizedBox(height: 20),
Text(
hasilBMI,
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Text(
kategori,
style: const TextStyle(
fontSize: 20,
),
)
],
),
),
);
}
}
Pengembangan Fitur Selanjutnya
Setelah aplikasi dasar selesai, kamu bisa menambahkan fitur berikut:
Dark Mode.
Riwayat perhitungan BMI.
Grafik perkembangan berat badan.
Penyimpanan data menggunakan SQLite.
Login pengguna.
Rekomendasi pola hidup sehat.
Integrasi dengan Google Fit.
Fitur-fitur tersebut dapat meningkatkan kualitas aplikasi sekaligus melatih kemampuan Flutter yang lebih lanjut.
Kesimpulan
Membuat aplikasi BMI dengan Flutter adalah proyek yang sangat cocok bagi pemula untuk mempelajari pengembangan aplikasi mobile. Dalam proyek ini, kita belajar menggunakan TextField, Button, State Management sederhana, serta logika perhitungan menggunakan bahasa Dart. Dengan pengembangan lebih lanjut, aplikasi BMI dapat menjadi portofolio yang menarik bagi calon Mobile Developer.
Selamat mencoba dan terus eksplorasi dunia Flutter!
Comments
Post a Comment