Contoh aplikasi BMI sederhana dengan flutter

Sebuah contoh aplikasi flutter sederhana sangat membantu bagi para programmer mobile pemula dalam belajar membuat aplikasi mobile dengan flutter. latihan-latihan dalam membuat aplikasi mobile dengan flutter akan mengasah ketrampilan skill anda menjadi lebih baik lagi, jadi anda harus terus berlatih yach… dan jangan cepat bosan. Sebuah aplikasi Flutter sederhana bisa beragam tergantung pada ide kreatif Anda. Sebagai contoh, mari kita buat aplikasi kalkulator BMI, Untuk mengetahui berapa berat badan ideal yang Anda miliki, maka salah satu caranya adalah dengan memahami cara menghitung BMI. Body Mass Index atau BMI adalah perkiraan lemak tubuh yang didasarkan pada tinggi dan berat badan

Berikut adalah contoh kode untuk aplikasi kalkulator BMI dengan Flutter:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Health Check',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HealthCheckPage(),
    );
  }
}

class HealthCheckPage extends StatefulWidget {
  @override
  _HealthCheckPageState createState() => _HealthCheckPageState();
}

class _HealthCheckPageState extends State<HealthCheckPage> {
  TextEditingController heightController = TextEditingController();
  TextEditingController weightController = TextEditingController();
  double bmiResult = 0.0;

  void calculateBMI() {
    double height = double.parse(heightController.text);
    double weight = double.parse(weightController.text);

    if (height > 0 && weight > 0) {
      double heightInMeters = height / 100;
      double bmi = weight / (heightInMeters * heightInMeters);

      setState(() {
        bmiResult = bmi;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Health Check'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: heightController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(labelText: 'Height (cm)'),
            ),
            TextField(
              controller: weightController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(labelText: 'Weight (kg)'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: calculateBMI,
              child: Text('Calculate BMI'),
            ),
            SizedBox(height: 20),
            Text(
              'Your BMI is: ${bmiResult.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            if (bmiResult > 0)
              Text(
                _getBMIInterpretation(),
                style: TextStyle(fontSize: 18),
                textAlign: TextAlign.center,
              ),
          ],
        ),
      ),
    );
  }

  String _getBMIInterpretation() {
    if (bmiResult < 18.5) {
      return 'You are underweight.';
    } else if (bmiResult >= 18.5 && bmiResult < 24.9) {
      return 'You have a normal weight.';
    } else if (bmiResult >= 24.9 && bmiResult < 29.9) {
      return 'You are overweight.';
    } else {
      return 'You are obese.';
    }
  }
}

Pastikan untuk menyalin kode di atas ke dalam proyek Flutter Anda. Skrip ini mencakup kalkulator BMI sederhana di halaman tunggal. Anda dapat menambahkan lebih banyak fitur seperti monitor detak jantung, saran nutrisi, atau panduan latihan sesuai kebutuhan aplikasi Anda. Juga, pastikan untuk mengimpor dan mengatur dependensi yang diperlukan jika Anda menggunakan fitur tertentu yang memerlukan plugin atau API tambahan.

Berikut penjelasan kode aplikasi BMI diatas

1. Import Package flutter/material.dart

Baris pertama adalah import yang menyertakan pustaka Flutter yang diperlukan untuk membangun aplikasi UI (User Interface).

2. void main() => runApp(MyApp());

Ini adalah titik awal dari aplikasi Flutter. Fungsi main adalah fungsi utama yang akan dieksekusi pertama kali ketika aplikasi dijalankan. Di dalamnya, runApp() digunakan untuk memulai aplikasi dengan widget MyApp.

3. class MyApp extends StatelessWidget {}

MyApp adalah kelas yang mewakili aplikasi secara keseluruhan. Ini adalah widget stateless karena tidak menyimpan data state yang berubah.

4. MaterialApp()

Widget ini memperkenalkan aplikasi ke Flutter, menyediakan berbagai konfigurasi seperti judul, tema, dan widget Home.

5. class HealthCheckPage extends StatefulWidget {}

HealthCheckPage adalah widget yang ditampilkan sebagai halaman utama dalam aplikasi. Karena mungkin terdapat perubahan data (state) di dalamnya, itu adalah widget stateful.

6. _HealthCheckPageState

Ini adalah kelas yang mengelola state dari HealthCheckPage. Di dalamnya, ada dua TextControllers untuk menerima input tinggi dan berat, serta variabel bmiResult untuk menyimpan hasil perhitungan BMI.

7. calculateBMI()

Fungsi ini digunakan untuk menghitung BMI dari input pengguna (tinggi dan berat). Setelah menghitung, hasilnya disimpan dalam variabel bmiResult menggunakan setState() untuk memperbarui UI.

8. build()

Fungsi ini membangun antarmuka pengguna untuk halaman HealthCheckPage. Berisi Scaffold sebagai kerangka utama dengan AppBar dan body yang berisi elemen-elemen seperti TextField, ElevatedButton, dan Text untuk menampilkan hasil BMI.

9. _getBMIInterpretation()

Fungsi ini memberikan interpretasi BMI berdasarkan nilai yang dihitung sebelumnya. Berdasarkan rentang tertentu, ia akan memberikan pesan yang sesuai dengan kondisi berat badan pengguna.

jika kode diatas di run maka akan tampil seperti video dibawah ini

Demikian tutorial contoh aplikasi kalkulator BMI sederhana dengan flutter, semoga bermanfaat.

Artikel terkait : cara instalasi flutter di windows

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *