Membuat Aplikasi Kalkulator BMI Modern dengan Flutter (Glassmorphism UI)

  

Membuat Aplikasi Kalkulator BMI Modern dengan Flutter (Glassmorphism UI)

Flutter tidak hanya kuat untuk membangun aplikasi, tetapi juga sangat fleksibel untuk membuat UI modern dan elegan. Pada artikel ini, saya akan membahas cara membuat Aplikasi Kalkulator BMI (Body Mass Index) menggunakan Flutter dengan desain gradient, glassmorphism, dan efek 3D.

Aplikasi ini menghitung BMI berdasarkan tinggi badan dan berat badan, lalu menampilkan kategori kesehatan secara otomatis.

📱 Apa itu BMI?

BMI (Body Mass Index) adalah metode sederhana untuk mengetahui apakah berat badan seseorang termasuk:

  • Kurus

  • Normal

  • Gemuk

  • Obesitas

Rumus BMI:

BMI = Berat Badan (kg) / (Tinggi Badan (m) × Tinggi Badan (m))

✨ Fitur Aplikasi

Beberapa fitur utama dari aplikasi ini:

✅ Input tinggi badan (cm)
✅ Input berat badan (kg)
✅ Perhitungan BMI otomatis
✅ Hasil BMI dengan warna sesuai kategori
✅ Desain modern (Gradient + Glass Effect)
✅ UI responsif dan ringan

🎨 Desain UI (Modern & Elegan)

Aplikasi ini menggunakan beberapa konsep desain modern:

1. Gradient Background

Memberikan kesan segar dan profesional dengan warna hijau gradasi.

2. Glassmorphism Card

Menggunakan BackdropFilter dan blur untuk menciptakan efek kaca transparan.

3. 3D Circle Decoration

Lingkaran blur transparan sebagai elemen dekoratif agar UI tidak terlihat kaku.

🧠 Logika Perhitungan BMI

Fungsi utama perhitungan BMI ada pada method hitungBMI():

bmi = berat / (tinggi * tinggi);

Kemudian hasil BMI diklasifikasikan sebagai berikut:

BMIKategori
< 18.5Kurus
18.5 – 24.9Normal
25 – 29.9Gemuk
≥ 30Obesitas

Setiap kategori ditampilkan dengan warna yang berbeda agar mudah dipahami pengguna.


Klick di sini

🧩 Struktur Aplikasi

Aplikasi terdiri dari:

  • MyApp → Root aplikasi

  • BmiPage → Halaman utama

  • TextField → Input data

  • ElevatedButton → Tombol hitung BMI

  • Text → Menampilkan hasil

🚀 Kelebihan Aplikasi Ini

✔ Mudah dikembangkan
✔ Cocok untuk pemula Flutter
✔ Bisa dikembangkan ke:

  • BMI History

  • Saran kesehatan

  • Grafik BMI

  • Login user

📌 Kesimpulan

Dengan Flutter, kita bisa membuat aplikasi sederhana seperti Kalkulator BMI namun tetap terlihat modern, profesional, dan user-friendly. Aplikasi ini sangat cocok sebagai:

  • Proyek belajar Flutter

  • Tugas kuliah

  • Portofolio developer pemula

Semoga artikel ini bermanfaat dan bisa menjadi inspirasi untuk membuat aplikasi Flutter lainnya 🚀

Komentar

Posting Komentar