Membuat Aplikasi BMI Calculator di Flutter dengan Provider

 MEMBUAT APLIKASI BMI CALCULATOR DI FLUTTER DENGAN FROVIDER

 

Membuat aplikasi sederhana adalah salah satu cara yang bagus untuk belajar Flutter. Pada tutorial kali ini, kita akan membuat BMI Calculator (Body Mass Index) menggunakan Flutter dan package Provider untuk mengelola state aplikasi.

Aplikasi ini memungkinkan pengguna mengatur tinggi dan berat badan menggunakan slider, kemudian menghitung nilai BMI berdasarkan data tersebut.

Apa Itu BMI?

BMI atau Body Mass Index adalah salah satu metode sederhana untuk menghitung perbandingan berat badan terhadap tinggi badan.

Rumus BMI adalah:

BMI = berat badan (kg) / tinggi badan² (m)

Sebagai contoh, seseorang dengan tinggi 170 cm dan berat 70 kg memiliki BMI sekitar 24,2.

Pada aplikasi ini, hasil BMI dibagi menjadi tiga kategori sederhana:

- Underweight — BMI ≤ 18,5

- Normal — BMI > 18,5 dan < 25

- Overweight — BMI ≥ 25

«Catatan: kategori BMI adalah penyederhanaan untuk kebutuhan aplikasi pembelajaran dan bukan diagnosis medis.»

Menggunakan Provider untuk State Management

Aplikasi ini menggunakan package "provider" dan "ChangeNotifier".

Kita membuat class "BmiData" yang bertugas menyimpan tinggi dan berat badan:

class BmiData extends ChangeNotifier {

  double _height = 170.0;

  double _weight = 70.0;

  double get height => _height;

  double get weight => _weight;

  void updateHeight(double value) {

    _height = value;

    notifyListeners();

  }

  void updateWeight(double value) {

    _weight = value;

    notifyListeners();

  }

}

"ChangeNotifier" memungkinkan widget yang menggunakan data tersebut mendapatkan pembaruan ketika nilainya berubah.

Fungsi "notifyListeners()" akan memberi tahu widget yang sedang menggunakan "BmiData" bahwa terjadi perubahan state.

Menghitung BMI

Perhitungan BMI dibuat dalam method "calculateBmi()":

double calculateBmi() {

  return _weight / ((_height / 100) * (_height / 100));

}

Karena tinggi badan pada aplikasi menggunakan satuan centimeter, nilainya terlebih dahulu dikonversi menjadi meter dengan membaginya dengan 100.

Contohnya:

Tinggi = 170 cm

Berat = 70 kg

BMI = 70 / (1.70 × 1.70)

    ≈ 24.22

Menentukan Interpretasi BMI

Setelah mendapatkan nilai BMI, aplikasi menentukan kategorinya menggunakan getter "interpretation":

String get interpretation {

  final bmi = calculateBmi();

  if (bmi >= 25) return 'Overweight';

  if (bmi > 18.5) return 'Normal';

  return 'Underweight';

}

Dengan cara ini, kita dapat memperoleh kategori BMI langsung dari object "BmiData".

Membuat Provider di "main()"

Provider dipasang pada bagian paling atas aplikasi menggunakan "ChangeNotifierProvider":

void main() {

  runApp(

    ChangeNotifierProvider<BmiData>(

      create: (context) => BmiData(),

      builder: (context, child) => const BmiApp(),

    ),

  );

}

Dengan begitu, widget yang berada di bawah provider dapat mengakses data BMI menggunakan:

final data = Provider.of<BmiData>(context);

Membuat Slider Tinggi Badan

Untuk mengatur tinggi badan, aplikasi menggunakan "Slider":

Slider(

  value: data.height,

  min: 120,

  max: 220,

  activeColor: const Color(0xFFEB1555),

  onChanged: (val) => data.updateHeight(val),

)

Slider tersebut memiliki rentang dari 120 cm sampai 220 cm.

Ketika slider digeser, method "updateHeight()" akan dipanggil dan nilai tinggi badan diperbarui.

Membuat Slider Berat Badan

Konsepnya sama untuk berat badan:

Slider(

  value: data.weight,

  min: 30,

  max: 150,

  activeColor: const Color(0xFFEB1555),

  onChanged: (val) => data.updateWeight(val),

)

Rentang berat badan pada contoh aplikasi ini adalah 30 kg sampai 150 kg.

Tampilan Aplikasi

Aplikasi menggunakan tema gelap dengan warna utama yang terinspirasi dari desain BMI Calculator klasik.

Background aplikasi menggunakan:

const Color(0xFF0A0E21)

Sedangkan card menggunakan:

const Color(0xFF1D1E33)

Dan warna aksen menggunakan:

const Color(0xFFEB1555)

Kombinasi warna tersebut membuat tampilan aplikasi terlihat sederhana dan modern.

Kesimpulan

Dengan contoh sederhana ini, kita sudah mempelajari beberapa konsep penting dalam Flutter, yaitu:

1. Membuat aplikasi menggunakan "MaterialApp".

2. Menggunakan "ChangeNotifier" untuk menyimpan state.

3. Menggunakan "Provider" untuk mengakses state dari widget.

4. Menggunakan "Slider" untuk menerima input pengguna.

5. Menghitung BMI berdasarkan tinggi dan berat badan.

6. Menampilkan kategori BMI berdasarkan hasil perhitungan.

Project seperti BMI Calculator sangat cocok untuk latihan Flutter karena menggabungkan UI, input pengguna, state management, dan logika perhitungan dalam satu aplikasi sederhana.

Dari project ini, aplikasi juga masih dapat dikembangkan lebih lanjut, misalnya dengan menambahkan tombol Calculate, halaman hasil BMI, input usia, pilihan gender, riwayat hasil perhitungan, hingga animasi pada halaman hasil.

Selamat mencoba dan terus bereksperimen dengan Flutter! 🚀