Flutter

Membuat Aplikasi Kalkulator BMI Sederhana dengan Flutter

Membangun Aplikasi Flutter dengan Navigasi dan Penanganan Formulir: Contoh Kalkulator BMI

Bismillaah,

Dalam tutorial kali ini, kita akan membuat aplikasi praktis yang menunjukkan dua fungsi penting, yaitu: navigasi antar layar dan mengambil data dari input pengguna dalam formulir. Kita akan memanfaatkan kasus penggunaan di dunia nyata, yaitu - kalkulator Indeks Massa Tubuh (BMI) - untuk mengilustrasikan konsep ini dengan cara yang jelas dan menarik.

Dengan mengikuti pendekatan langkah demi langkah ini, Anda akan mendapatkan pengalaman langsung dengan:

  • Membangun antarmuka pengguna dengan formulir dan elemen interaktif.
  • Menerapkan navigasi antarhalaman berbeda dalam aplikasi Flutter Anda.
  • Melewati data dari satu layar ke layar lainnya untuk perhitungan dan menampilkan hasil.

Kita akan membagi proses pengembangan menjadi dua bagian:

  • Halaman Input: Layar ini akan menampung elemen antarmuka pengguna untuk mengumpulkan data pengguna, termasuk pemilihan jenis kelamin (tombol sakelar), penyesuaian tinggi dan berat badan (slider), dan tombol untuk menavigasi ke halaman hasil.
  • Halaman Hasil: Pada halaman ini, kita akan mengambil data pengguna dari halaman sebelumnya, menghitung BMI, dan menampilkan hasilnya beserta kategori berdasarkan nilai yang dihitung. Kita juga akan menambahkan representasi visual menggunakan ikon untuk meningkatkan pengalaman pengguna.

Siap untuk beraksi? Mari kita mulai dengan membuat halaman pertama untuk masukan pengguna!

Struktur Proyek

Setup Project Environment

  • Instal Flutter SDK: Jika belum, unduh dan instal Flutter SDK mengikuti instruksi resmi untuk sistem operasi Anda https://docs.flutter.dev/get-started/install.
  • Siapkan IDE: Pilih IDE yang Anda sukai untuk pengembangan Flutter. Opsi populer termasuk Android Studio, Visual Studio Code, dan IntelliJ IDEA. Pastikan Anda telah menginstal plugin Flutter untuk IDE yang Anda pilih.
  • Buat Proyek Flutter Baru: Buka terminal Anda dan navigasi ke direktori proyek yang diinginkan. Kemudian, jalankan perintah berikut untuk membuat proyek Flutter baru:

Bash

$ flutter create bmi_calculator
$ cd bmi_calculator
$ code .

Perintah ini membuat proyek Flutter baru bernama bmi_calculator di direktori yang ditentukan. Kemudian masuk ke dalam direktori tersebut, dan buka proyek direktori pada editor Visual Studio Code.

Halaman Input

Halaman ini akan memiliki formulir dengan tombol sakelar (Toggle) untuk jenis kelamin, penggeser (Slider) untuk tinggi dan berat badan, dan tombol untuk menavigasi ke halaman hasil.

class UserInput extends StatefulWidget {
  @override
  _UserInputState createState() => _UserInputState();
}

class _UserInputState extends State<UserInput> {
  bool _isMale = true;
  double _height = 170.0;
  double _weight = 60.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI Calculator'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            ToggleButtons(
              children: [
                Icon(Icons.male),
                Icon(Icons.female),
              ],
              isSelected: [_isMale, !_isMale],
              onPressed: (index) => setState(() => _isMale = index == 0),
            ),
            SizedBox(height: 16.0),
            Text('Height (cm): ${_height.toStringAsFixed(1)}'),
            Slider(
              value: _height,
              min: 100.0,
              max: 250.0,
              onChanged: (value) => setState(() => _height = value),
            ),
            SizedBox(height: 16.0),
            Text('Weight (kg): ${_weight.toStringAsFixed(1)}'),
            Slider(
              value: _weight,
              min: 30.0,
              max: 150.0,
              onChanged: (value) => setState(() => _weight = value),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => BmiResult(
                    isMale: _isMale,
                    height: _height,
                    weight: _weight,
                  ),
                ),
              ),
              child: Text('Calculate BMI'),
            ),
          ],
        ),
      ),
    );
  }
}

Penjelasan:

  • Kita mendefinisikan kelas UserInput sebagai StatefulWidget dengan kelas State yang sesuai.
  • Variabel menampung pilihan jenis kelamin pengguna (_isMale), tinggi badan (_height), dan berat badan (_weight).
  • Metode build membuat UI dengan Scaffold, AppBar, dan Padding.
  • ToggleButtons memungkinkan pengguna memilih jenis kelamin.
  • Slider dengan callback onChanged memperbarui variabel status terkait untuk tinggi dan berat badan.
  • Terakhir, ElevatedButton menggunakan Navigator.push untuk menavigasi ke halaman BmiResult, meneruskan data pengguna.

Halaman Hasil Perhitungan BMI

Halaman ini menerima data pengguna dari halaman sebelumnya, menghitung BMI, dan menampilkan hasilnya dengan kategori berdasarkan nilai yang dihitung.

class BmiResult extends StatelessWidget {
  final bool isMale;
  final double height;
  final double weight;

  const BmiResult({required this.isMale, required this.height, required this.weight});

  double calculateBmi() {
    return weight / ((height / 100) * (height / 100));
  }

  String getCategory(double bmi) {
    if (bmi < 18.5) {
      return 'Slim';
    } else if (bmi < 25.0) {
      return 'Normal';
    } else {
      return 'Fat';
    }
  }

  @override
  Widget build(BuildContext context) {
    double bmi = calculateBmi();
    String category = getCategory(bmi);

    return Scaffold(
      appBar: AppBar(
        title: Text('BMI Result'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Your BMI is: ${bmi.toStringAsFixed(1)}',
              style: TextStyle(fontSize: 24.0),
            ),
            SizedBox(height: 16.0),
            Text(
              'Category: $category',
              style: TextStyle(fontSize: 18.0),
            ),
            SizedBox(height: 16.0),
            // Add an icon based on the category
            getIcon(category),
          ],
        ),
      ),
    );
  }

  Widget getIcon(String category) {
    if (category == 'Slim') {
      return Icon(Icons.adjust, color: Colors.blue);
    } else if (category == 'Normal') {
      return Icon(Icons.sentiment_satisfied, color: Colors.green);
    } else {
      return Icon(Icons.warning, color: Colors.red);
    }
  }
}

Penjelasan perubahannya:

  • Kita menambahkan metode baru getIcon yang menggunakan string kategori sebagai masukan.
  • Di dalam getIcon, kita menggunakan pernyataan if-else untuk menampilkan ikon berbeda berdasarkan kategori:
    • Underweight: Icons.adjust (warna biru)
    • Normal: Icons.sentiment_satisfied (warna hijau)
    • Overweight: Ikon.peringatan (warna merah)
  • Dalam metode build, kita memanggil getIcon(category) dan menampilkan widget ikon yang dikembalikan.

Kode ini sekarang menampilkan kategori BMI bersama dengan ikon yang sesuai untuk representasi visual yang lebih baik.

Comments

Related posts