Aplikasi Kalkulator BMI sederhana🧍‍♂️⬆️

-

 

Membuat Aplikasi Kalkulator BMI Menggunakan Flutter (Tema Dark Hitam–Merah)

Pada artikel ini saya akan membahas struktur dan fitur aplikasi Kalkulator BMI (Body Mass Index) yang dibuat menggunakan Flutter. Aplikasi ini dirancang dengan tampilan dark theme (hitam–merah), animasi interaktif, serta responsif di berbagai ukuran layar (HP, tablet, hingga desktop).

Aplikasi ini cocok sebagai:

  • Proyek latihan Flutter

  • Contoh UI/UX modern

  • Referensi aplikasi kalkulator kesehatan sederhana

1. Apa itu BMI?

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

  • Kurus (Underweight)

  • Normal

  • Kelebihan berat badan (Overweight)

  • Obesitas

Rumus BMI:

  • Metric: berat (kg) / (tinggi (m) × tinggi (m))

  • Imperial: 703 × berat (lb) / (tinggi (in) × tinggi (in))

Aplikasi ini mendukung dua sistem satuan tersebut.

2. Struktur Utama Aplikasi Flutter

Aplikasi disusun dalam satu file main.dart dengan beberapa bagian utama:

  • MyApp → root aplikasi dan pengaturan tema

  • BMICalculatorPage → halaman utama input data

  • ResultPage → halaman hasil perhitungan BMI

  • HistoryPage → halaman riwayat BMI

  • BMIEntry → model data BMI

Struktur ini memudahkan pengembangan dan pemeliharaan kode.

Beginilah tampilan aplikasi kalkulator bmi:



3. Tema Dark Hitam–Merah

Aplikasi menggunakan Dark Theme agar terlihat modern dan nyaman di mata.

Ciri tema:

  • Background: Hitam (Colors.black)

  • Aksen utama: Merah (Colors.redAccent)

  • Card: Abu gelap (#121212)

Tema diatur melalui ThemeData.dark() lalu dikustomisasi menggunakan copyWith().

4. Fitur Input Gender

Pengguna dapat memilih gender:

  • Male

  • Female

  • Other

Implementasi:

  • Menggunakan GestureDetector

  • AnimatedContainer memberi efek animasi saat dipilih

  • Warna dan border berubah ketika aktif

Fitur ini meningkatkan interaksi dan estetika UI.

5. Fitur Input Usia (Age)

Bagian usia dilengkapi dengan:

  • Tombol (+ dan -) untuk menaikkan / menurunkan usia

  • TextField kecil untuk input manual

Keunggulan:

  • Tombol menggunakan animasi scale (feedback visual)

  • Nilai usia langsung sinkron dengan state

  • Aman dari error karena dibatasi angka valid

6. Pilihan Satuan (Metric & Imperial)

Pengguna bisa memilih:

  • Metric → kg & cm

  • Imperial → lb & inch

Fitur penting:

  • Konversi otomatis saat berpindah satuan

  • Data tetap konsisten

  • Menggunakan ToggleButtons

Ini membuat aplikasi fleksibel untuk pengguna internasional.

7. Input Tinggi Badan (Height)

Tinggi badan diinput menggunakan Slider:

  • Metric: 100 – 220 cm

  • Imperial: 40 – 90 inch

Kelebihan:

  • Lebih intuitif dibanding TextField

  • Nilai langsung terlihat

  • Slider otomatis menyesuaikan satuan

8. Input Berat Badan (Weight)

Berat badan dapat diinput dengan:

  • TextField (manual)

  • Tombol + dan - (increment 0.5)

Keunggulan:

  • Validasi angka

  • Mudah digunakan

  • Sinkron dengan state Flutter

9. Tombol Hitung BMI dengan Animasi

Tombol Hitung BMI memiliki:

  • Animasi tekan (scale)

  • Warna kontras

  • Responsif di berbagai ukuran layar

Saat ditekan:

  1. BMI dihitung

  2. Kategori BMI ditentukan

  3. Data disimpan ke history

  4. Berpindah ke halaman hasil

10. Halaman Hasil BMI (Result Page)

Di halaman hasil, pengguna melihat:

  • Nilai BMI

  • Kategori (Normal, Overweight, dll)

  • Progress Indicator animasi

  • Saran kesehatan singkat

Fitur tambahan:

  • Tombol Salin hasil (copy ke clipboard)

  • Animasi Circular Progress

11. Riwayat Perhitungan BMI (History)

Aplikasi menyimpan riwayat BMI selama aplikasi berjalan.

Isi history:

  • Nilai BMI

  • Kategori

  • Waktu perhitungan

  • Tinggi & berat badan

Pengguna juga dapat:

  • Melihat total data

  • Menghapus semua riwayat

Catatan: pada versi ini, history masih in-memory (tidak tersimpan setelah app ditutup).

12. Responsif di Berbagai Layar

Aplikasi dibuat responsive dengan:

  • LayoutBuilder

  • ConstrainedBox

  • Penyesuaian layout untuk layar lebar

Hasilnya:

  • HP → layout vertikal

  • Tablet/Desktop → layout lebih lebar dan rapi

13. Kesimpulan

Aplikasi Kalkulator BMI ini memiliki:

  • UI modern (dark theme hitam–merah)

  • Animasi interaktif

  • Fitur lengkap

  • Responsif

  • Struktur kode rapi

Sangat cocok sebagai contoh proyek Flutter tingkat pemula–menengah dan dapat dikembangkan lebih lanjut (penyimpanan lokal, grafik, atau cloud).

BY: RIZQI RESDHIANA XI RPL II

Semoga penjelasan ini bermanfaat🚀

Comments

Post a Comment

Popular posts from this blog

Jenis-jenis sistem operasi os

-
Image
Memahami Pengertian dan Fungsi  Mobile OS (Operating System) Menurut Wikipedia Sistem Operasi Mobile atau sering disebut dengan istilah  Mobile OS  merupakan sistem operasi yang digunakan untuk mengatur sistem kerja hardware atau aplikasi pada perangkat mobile. Sebetulnya mobile OS mirip dengan OS yang digunakan pada  komputer atau laptop. Hanya saja mobile OS, dibuat lebih sederhana lagi. Lebih jelasnya fungsi sistem operasi mobile yaitu menghubungkan  hardware  (perangkat keras ) dengan  user  (pengguna). Selain itu Mobile OS jugalah yang mengatur sehingga suatu aplikasi yang terinstall bisa berjalan dengan baik. Sejarah Singkat Sistem Operasi Mobile Mobile OS bukanlah salah satu teknologi yang baru. 20 tahun yang lalu teknologi ini sudah mulai dikembangkan dengan kemampuan awal yang sangat minim. Tidak seperti sekarang dimana Mobile OS bisa membuat perangkat mobile yang kita pakai setiap hari terkoneksi  internet, merekam video, menampilka...
Read more

Latihan membuat tampilan flutter sederhana 🤖

-
Image
M embuat Tampilan Flutter Sederhana Menggunakan AppBar, Row, Padding, dan SizedBox Flutter merupakan framework buatan Google yang digunakan untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode. Pada artikel ini, kita akan membahas contoh tampilan Flutter sederhana yang terdiri dari AppBar , Row , Text , Padding , dan SizedBox . Contoh ini cocok untuk pemula yang baru belajar dasar UI Flutter. 1. Struktur Dasar Aplikasi Flutter Setiap aplikasi Flutter dimulai dari fungsi main() yang menjalankan widget utama menggunakan runApp() . Widget utama biasanya berupa MaterialApp yang berfungsi sebagai akar aplikasi dan menyediakan tema serta navigasi. Pada contoh ini, widget utama bernama MyApp dan halaman utamanya adalah HomePage . 2. Menggunakan Scaffold dan AppBar Scaffold digunakan sebagai kerangka utama halaman. Di dalamnya terdapat AppBar yang berfungsi sebagai header aplikasi. Pada AppBar: title digunakan untuk menampilkan judul backgroundColor untuk mengatur w...
Read more

Belajar Flutter

-
Image
  Laporan Pembelajaran Mandiri Flutter Mata Pelajaran: Pemrograman Mobile Nama: Rizqi Resdhiana Kelas: XI RPL II 📝 Cerita Singkat Kegiatan Hari Ini Pada pembelajaran hari ini, saya melakukan kegiatan belajar mandiri sesuai dengan instruksi guru. Fokus pembelajaran adalah mengombinasikan beberapa widget Flutter untuk membangun satu halaman aplikasi sederhana yang rapi dan dapat dijalankan tanpa error. Dalam proses pengerjaan, saya mencoba memahami fungsi masing-masing widget serta bagaimana cara menyusunnya agar tampilan aplikasi terlihat lebih terstruktur. Jika terjadi kesalahan (error), saya mencoba memperbaikinya sendiri dengan membaca kembali kode dan melakukan eksperimen kecil. Pembelajaran ini membantu saya memahami bahwa membuat UI Flutter membutuhkan ketelitian, kesabaran, dan banyak percobaan. 🧩 Widget yang Digunakan Pada aplikasi Flutter yang saya buat, saya telah menggunakan widget-widget berikut: MaterialApp sebagai root aplikasi Scaffold sebagai kerangka halama...
Read more