Belajar Flutter dari Proyek Nyata: Membuat Aplikasi Kalkulator BMI di DartPad

Pendahuluan

Belajar pemrograman Flutter akan jauh lebih menyenangkan jika kita tidak hanya mempelajari teori dan menghafal nama-nama widget, tetapi langsung membangun sebuah aplikasi yang dapat digunakan.

Salah satu proyek sederhana yang sangat cocok untuk belajar Flutter adalah Kalkulator BMI (Body Mass Index).

Walaupun aplikasinya terlihat sederhana, di dalamnya terdapat banyak konsep dasar Flutter yang sangat penting untuk dikuasai, seperti:

• MaterialApp

• Scaffold

• AppBar

• StatefulWidget

• TextField

• TextEditingController

• Button

• setState()

• Function

• Variable

• Percabangan if-else

• Perhitungan matematika

• ListView / SingleChildScrollView

• Column dan Row

• Container

• Card

• Icon

• Text

• Responsive UI

• Validasi input

• Pemisahan tampilan dan logika

Dengan satu proyek ini, siswa dapat melihat bagaimana konsep-konsep dasar pemrograman Dart diterapkan ke dalam aplikasi Flutter.

---

1. Apa Itu Flutter?

Flutter adalah framework UI dari Google yang digunakan untuk membangun aplikasi dengan satu basis kode.

Flutter menggunakan bahasa pemrograman Dart.

Dengan Flutter, kita dapat membangun aplikasi untuk berbagai platform, antara lain:

• Android

• iOS

• Web

• Windows

• macOS

• Linux

Salah satu kelebihan Flutter adalah konsep widget.

Hampir seluruh bagian tampilan aplikasi Flutter dibangun menggunakan widget.

Contohnya:

Text('Halo Flutter')

adalah widget untuk menampilkan teks.

Sedangkan:

Icon(Icons.favorite)

digunakan untuk menampilkan ikon.

Bahkan struktur utama aplikasi juga merupakan widget.

---

2. Mengapa Menggunakan DartPad?

Untuk belajar, kita tidak selalu harus langsung menginstal Flutter SDK, Android Studio, emulator, dan berbagai dependency.

Kita bisa menggunakan DartPad untuk mencoba kode Flutter secara online.

Ini sangat cocok untuk pembelajaran di kelas karena siswa dapat langsung fokus memahami konsep pemrograman.

Alur sederhananya:

DartPad
   ↓
Flutter
   ↓
Menulis kode
   ↓
Run
   ↓
Aplikasi tampil

Dengan demikian, siswa dapat belajar konsep Flutter terlebih dahulu sebelum masuk ke lingkungan development yang lebih kompleks seperti VS Code atau Android Studio.

---

3. Mengenal BMI

BMI merupakan singkatan dari Body Mass Index.

BMI digunakan sebagai salah satu indikator sederhana untuk melihat hubungan antara berat badan dan tinggi badan.

Rumus BMI:

BMI = berat badan / (tinggi badan × tinggi badan)

Tinggi badan harus dikonversi dari centimeter menjadi meter.

Misalnya:

Berat = 60 kg
Tinggi = 170 cm

Tinggi dalam meter = 170 / 100
                    = 1,70 meter

Kemudian:

BMI = 60 / (1,70 × 1,70)

BMI = 20,76

Hasil tersebut masuk dalam kategori BMI normal menurut klasifikasi umum orang dewasa.

Catatan: BMI merupakan indikator umum, bukan diagnosis medis. Interpretasinya dapat berbeda pada anak/remaja, atlet, lansia, kehamilan, dan kondisi tertentu.

---

4. Kategori BMI

Dalam aplikasi sederhana ini kita dapat menggunakan kategori umum berikut:

BMI	Kategori
< 18,5	Kurus
18,5 – 24,9	Normal
25 – 29,9	Overweight
≥ 30	Obesitas

Aturan tersebut nantinya akan diterjemahkan ke dalam kode Dart menggunakan percabangan.

Contohnya:

if (result < 18.5) {
  category = 'Kurus';
} else if (result < 25) {
  category = 'Normal';
} else if (result < 30) {
  category = 'Overweight';
} else {
  category = 'Obesitas';
}

Di sinilah siswa mulai melihat hubungan antara logika pemrograman dan tampilan aplikasi.

---

5. Struktur Dasar Aplikasi Flutter

Aplikasi Flutter kita dimulai dari:

void main() {
  runApp(const BMICalculatorApp());
}

main() merupakan titik awal program Dart.

Kemudian:

runApp()

digunakan untuk menjalankan aplikasi Flutter.

Kita kemudian membuat widget utama:

class BMICalculatorApp extends StatelessWidget {

Kemudian aplikasi memiliki halaman utama:

class BMICalculatorPage extends StatefulWidget {

Mengapa halaman BMI menggunakan StatefulWidget?

Karena data pada halaman akan berubah.

Sebelum tombol ditekan:

BMI = belum ada

Setelah tombol ditekan:

BMI = 20.8
Kategori = Normal

Karena tampilan berubah berdasarkan data, kita membutuhkan state.

---

6. Memahami StatelessWidget dan StatefulWidget

Ini merupakan salah satu konsep terpenting dalam Flutter.

StatelessWidget

Digunakan ketika tampilan tidak membutuhkan perubahan state.

Contoh:

class MyApp extends StatelessWidget {

Misalnya sebuah teks:

Text('Belajar Flutter')

tidak memiliki data yang berubah.

---

StatefulWidget

Digunakan ketika tampilan dapat berubah.

Pada aplikasi BMI:

class BMICalculatorPage extends StatefulWidget {

Karena:

• nilai BMI berubah

• kategori berubah

• saran berubah

• ikon hasil berubah

Maka kita membutuhkan StatefulWidget.

---

7. Memahami TextEditingController

Bagaimana Flutter mengambil data yang diketik pengguna?

Kita menggunakan:

TextEditingController

Pada aplikasi kita terdapat dua controller:

final TextEditingController weightController =
    TextEditingController();

final TextEditingController heightController =
    TextEditingController();

Controller pertama digunakan untuk membaca berat badan.

Controller kedua digunakan untuk membaca tinggi badan.

Misalnya pengguna mengetik:

60

Maka:

weightController.text

akan menghasilkan:

60

Namun data tersebut masih berupa String.

Karena kita ingin melakukan perhitungan matematika, kita perlu mengubahnya menjadi angka.

---

8. Konversi String Menjadi Double

Kita menggunakan:

double.tryParse()

Contohnya:

final double? weight =
    double.tryParse(weightController.text);

Jika pengguna memasukkan:

60

maka hasilnya:

60.0

Tetapi jika pengguna memasukkan:

abc

maka hasilnya:

null

Inilah alasan kita melakukan validasi.

if (weight == null ||
    heightCm == null ||
    weight <= 0 ||
    heightCm <= 0) {
  showMessage('Masukkan berat dan tinggi yang valid.');
  return;
}

Ini merupakan contoh sederhana input validation.

---

9. Menghitung BMI dengan Dart

Setelah mendapatkan berat dan tinggi, kita melakukan konversi tinggi:

final double heightMeter = heightCm / 100;

Misalnya:

170 cm

menjadi:

1.7 meter

Kemudian:

final double result =
    weight / (heightMeter * heightMeter);

Jika:

weight = 60
heightMeter = 1.7

maka:

BMI = 60 / (1.7 × 1.7)

Hasilnya sekitar:

20.8

---

10. Memahami Percabangan if-else

Setelah BMI diperoleh, kita menentukan kategorinya.

if (result < 18.5) {
  resultCategory = 'Kurus';
} else if (result < 25) {
  resultCategory = 'Normal';
} else if (result < 30) {
  resultCategory = 'Overweight';
} else {
  resultCategory = 'Obesitas';
}

Perhatikan bahwa program akan mengevaluasi kondisi dari atas ke bawah.

Misalnya:

result = 20.8

Maka:

20.8 < 18.5 → false
20.8 < 25   → true

Sehingga:

Normal

---

11. Mengapa Menggunakan setState()?

Ini adalah konsep Flutter yang sangat penting.

Setelah BMI dihitung, kita melakukan:

setState(() {
  bmi = result;
  category = resultCategory;
  advice = resultAdvice;
  resultIcon = icon;
});

setState() memberi tahu Flutter:

"Data pada halaman ini berubah. Tolong bangun kembali tampilan yang bergantung pada data tersebut."

Tanpa setState(), nilai variable memang bisa berubah, tetapi tampilan belum tentu diperbarui.

Secara sederhana:

Input
  ↓
Klik tombol
  ↓
Hitung BMI
  ↓
Data berubah
  ↓
setState()
  ↓
UI diperbarui

Ini merupakan konsep fundamental dalam Flutter.

---

12. Memahami Column

Banyak aplikasi Flutter menggunakan:

Column(
  children: [
    Text('BMI Calculator'),
    TextField(),
    Button(),
  ],
)

Column menyusun widget secara vertikal.

Hasilnya:

BMI Calculator

[ TextField ]

[ Button ]

Sementara Row menyusun widget secara horizontal.

Row(
  children: [
    Icon(Icons.calculate),
    Text('Hitung BMI'),
  ],
)

Hasilnya:

[icon] Hitung BMI

---

13. Mengapa Menggunakan SingleChildScrollView?

Aplikasi harus dapat digunakan pada layar dengan ukuran berbeda.

Jika konten terlalu panjang, layar dapat mengalami overflow.

Karena itu kita menggunakan:

SingleChildScrollView(
  child: ...
)

Sehingga pengguna dapat melakukan scroll.

Ini penting ketika membuat aplikasi yang harus berjalan pada:

• smartphone kecil

• smartphone besar

• tablet

• browser DartPad

---

14. Membuat Input Berat Badan

Widget yang digunakan:

TextField(
  controller: weightController,
  keyboardType:
      const TextInputType.numberWithOptions(
    decimal: true,
  ),
  decoration: InputDecoration(
    labelText: 'Berat Badan',
    hintText: 'Contoh: 60',
    suffixText: 'kg',
    prefixIcon: const Icon(
      Icons.monitor_weight_outlined,
    ),
  ),
)

Mari kita bedah.

controller

controller: weightController

Digunakan untuk membaca isi input.

keyboardType

keyboardType: TextInputType.number

Memberikan keyboard angka.

labelText

labelText: 'Berat Badan'

Memberikan label input.

suffixText

suffixText: 'kg'

Menampilkan satuan kilogram.

prefixIcon

prefixIcon: Icon(...)

Menampilkan ikon di sebelah kiri.

---

15. Membuat Tombol Hitung

Tombol:

FilledButton.icon(
  onPressed: calculateBMI,
  icon: const Icon(Icons.calculate),
  label: const Text('Hitung BMI'),
)

Bagian yang sangat penting adalah:

onPressed: calculateBMI

Artinya ketika tombol ditekan, function:

calculateBMI()

akan dijalankan.

Ini merupakan contoh konsep event handling.

User menekan tombol
        ↓
onPressed
        ↓
calculateBMI()
        ↓
Perhitungan
        ↓
setState()
        ↓
UI berubah

---

16. Menampilkan Hasil Secara Kondisional

Bagaimana agar hasil BMI tidak muncul sebelum tombol ditekan?

Kita menggunakan:

if (bmi != null) ...[
   ...
]

Artinya:

Jika BMI sudah memiliki nilai
→ tampilkan hasil

Jika:

bmi == null

maka bagian hasil belum ditampilkan.

Ini disebut conditional rendering.

Konsep seperti ini sangat sering digunakan dalam pengembangan aplikasi.

---

17. Menampilkan Nilai BMI

Kita menggunakan:

Text(
  bmi!.toStringAsFixed(1),
)

Misalnya nilai sebenarnya:

20.761245

Maka:

toStringAsFixed(1)

menghasilkan:

20.8

Angka 1 berarti tampilkan satu angka di belakang koma.

Jika:

toStringAsFixed(2)

hasilnya:

20.76

---

18. Membuat Tampilan Kategori BMI

Aplikasi tidak hanya menampilkan angka.

Kita juga memberikan informasi:

Kurus
Normal
Overweight
Obesitas

Kita menggunakan Container:

Container(
  padding: const EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 8,
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30),
  ),
  child: Text(category),
)

Di sini siswa dapat belajar konsep:

• Container

• Padding

• BoxDecoration

• BorderRadius

• Text

---

19. Memberikan Saran Berdasarkan Hasil

Aplikasi menjadi lebih menarik jika tidak hanya memberikan angka.

Misalnya:

if (result < 18.5) {
  resultAdvice =
      'Perbanyak makanan bergizi seimbang...';
}

Untuk BMI normal:

else if (result < 25) {
  resultAdvice =
      'Pertahankan pola makan bergizi seimbang...';
}

Dengan demikian satu nilai input dapat menghasilkan beberapa output.

Input
 ↓
Berat + Tinggi
 ↓
BMI
 ↓
Kategori
 ↓
Saran

Ini merupakan contoh nyata bagaimana data diproses menjadi informasi.

---

20. Konsep Pemrograman yang Dipelajari

Dari aplikasi sederhana ini, sebenarnya siswa sudah belajar banyak konsep pemrograman.

Konsep	Implementasi
Variable	double? bmi
String	String category
Function	calculateBMI()
Input	TextField
Controller	TextEditingController
Konversi data	double.tryParse()
Operator	/, *
Percabangan	if-else
Event	onPressed
State	setState()
UI	Widget
Layout	Column, Row
Tampilan	Container, Card
Icon	Icon
Validasi	if (weight == null...)

Inilah alasan proyek sederhana seperti BMI sangat baik digunakan sebagai proyek awal Flutter.

---

21. Arsitektur Sederhana Aplikasi

Jika digambarkan, alur aplikasi kita seperti ini:

                USER
                  │
                  ▼
        ┌─────────────────┐
        │ Input Berat     │
        │ Input Tinggi    │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │ Validasi Input  │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │ Hitung BMI      │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │ if / else       │
        │ Tentukan Status  │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │ setState()      │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │ Tampilkan Hasil │
        │ BMI + Kategori  │
        │ + Saran         │
        └─────────────────┘

Alur seperti ini penting dipahami siswa sebelum mereka membangun aplikasi yang lebih kompleks.

---

22. Tantangan untuk Siswa

Setelah aplikasi dasar berhasil dibuat, jangan berhenti di sini.

Berikan tantangan kepada siswa.

Level 1 — Modifikasi Tampilan

Ubahlah:

• warna aplikasi

• icon

• ukuran font

• bentuk tombol

• background

• Card

Tujuannya agar siswa memahami bahwa UI Flutter sangat fleksibel.

---

Level 2 — Tambahkan Nama Pengguna

Tambahkan:

Nama Lengkap
Berat Badan
Tinggi Badan

Kemudian hasil:

Halo, Budi!

BMI Anda:
22.1

Kategori:
Normal

---

Level 3 — Tambahkan Jenis Kelamin

Tambahkan pilihan:

○ Laki-laki
○ Perempuan

Gunakan:

Radio

atau:

RadioListTile

---

Level 4 — Tambahkan Umur

Tambahkan:

Umur

Kemudian pelajari bagaimana kategori BMI untuk orang dewasa berbeda dengan interpretasi BMI untuk anak dan remaja.

Ini dapat menjadi kesempatan untuk mengajarkan siswa bahwa algoritma aplikasi harus disesuaikan dengan konteks data yang digunakan.

---

Level 5 — Riwayat BMI

Buat fitur:

Riwayat BMI

20 Agustus 2026
Budi
BMI: 22.1
Normal

21 Agustus 2026
Budi
BMI: 22.5
Normal

Di tahap ini siswa mulai diperkenalkan pada konsep:

• List

• Model

• Penyimpanan data

• Database lokal

---

23. Pengembangan Menuju Aplikasi Profesional

Aplikasi BMI sederhana dapat dikembangkan menjadi aplikasi kesehatan mini.

Contohnya:

BMI Calculator
│
├── Dashboard
│
├── Kalkulator BMI
│
├── Riwayat
│
├── Aktivitas
│
├── Makanan
│
├── Profil
│
└── Pengaturan

Kemudian dapat dikembangkan menggunakan:

Flutter
   │
   ├── State Management
   │
   ├── SQLite / Hive
   │
   ├── Firebase
   │
   ├── REST API
   │
   └── Authentication

Artinya, proyek sederhana yang awalnya hanya terdiri dari dua input dapat berkembang menjadi aplikasi yang jauh lebih kompleks.

---

24. Dari DartPad ke VS Code

DartPad sangat bagus untuk tahap awal.

Tetapi ketika aplikasi mulai berkembang, siswa sebaiknya mulai mengenal:

• Flutter SDK

• VS Code

• Android Studio

• Android SDK

• Emulator

• Git

• GitHub

Alur pembelajarannya dapat dibuat seperti ini:

DartPad
   ↓
Memahami Dart
   ↓
Memahami Widget
   ↓
Membuat aplikasi sederhana
   ↓
VS Code
   ↓
Flutter Project
   ↓
Database
   ↓
API
   ↓
Authentication
   ↓
Deployment

Dengan pola tersebut, siswa tidak hanya belajar "cara membuat aplikasi", tetapi memahami perjalanan pengembangan aplikasi secara bertahap.

---

25. Kesimpulan

Membuat aplikasi Kalkulator BMI mungkin terlihat sebagai proyek kecil.

Namun dari proyek tersebut siswa dapat mempelajari banyak konsep fundamental Flutter.

Mulai dari:

Widget
↓
Layout
↓
Input
↓
Controller
↓
Function
↓
Event
↓
Validasi
↓
Perhitungan
↓
Conditional Logic
↓
State
↓
setState()
↓
UI Update

Inilah pendekatan pembelajaran pemrograman yang sangat baik:

Belajar konsep melalui proyek nyata.

Siswa tidak hanya mengetahui bahwa setState() adalah sebuah method, tetapi memahami mengapa method tersebut dibutuhkan.

Siswa tidak hanya mengetahui TextField, tetapi memahami bagaimana data dari pengguna masuk ke program.

Siswa tidak hanya mengetahui if-else, tetapi memahami bagaimana logika program menentukan hasil yang ditampilkan kepada pengguna.

Dan yang paling penting, siswa dapat melihat bahwa kode yang mereka tulis benar-benar berubah menjadi sebuah aplikasi.

---

Penutup

Kalkulator BMI dapat menjadi salah satu proyek awal yang ideal dalam pembelajaran Pemrograman Perangkat Bergerak menggunakan Flutter.

Setelah siswa menguasai proyek ini, guru dapat melanjutkan ke proyek berikutnya seperti:

1. Aplikasi To-Do List

2. Aplikasi Catatan

3. Aplikasi Jadwal Pelajaran

4. Aplikasi Kas Kelas

5. Aplikasi Absensi

6. Aplikasi Inventaris

7. Aplikasi Perpustakaan

8. Aplikasi Kantin

9. Aplikasi dengan SQLite

10. Aplikasi dengan Firebase

11. Aplikasi dengan REST API

Dengan demikian pembelajaran Flutter tidak berhenti pada "bisa membuat tampilan", tetapi berkembang menuju kemampuan menganalisis masalah, membuat algoritma, mengolah data, membangun UI, dan menghasilkan aplikasi yang benar-benar dapat digunakan.

Selamat belajar Flutter. Mulai dari aplikasi sederhana, pahami konsepnya, kemudian terus kembangkan menjadi aplikasi yang lebih besar dan bermanfaat.