🚀 Bikin Aplikasi BMI Calculator Kece dengan Flutter (UI Modern & Simpel!)

 

Pernah bosan dengan tutorial aplikasi pemula yang UI-nya kaku dan terlihat seperti aplikasi tahun 2010?

Jika kamu baru belajar Flutter, membuat aplikasi Kalkulator BMI (Body Mass Index) adalah salah satu proyek wajib. Tapi kali ini, kita tidak akan membuat UI yang membosankan. Kita akan membangun Kalkulator BMI dengan desain Dark Mode yang elegan, interaksi slider yang mulus, dan menggunakan struktur kode yang rapi.

Hanya dengan satu file main.dart, kamu sudah bisa pamer aplikasi ini ke teman-temanmu! 😎

✨ Apa yang Menarik dari Kode Ini?

Sebelum masuk ke kode, mari kita lihat beberapa teknik keren yang digunakan dalam aplikasi ini:

• Dark Theme Bawaan: Kita menggunakan ThemeData.dark() dengan modifikasi warna custom (#0A0E21) yang membuatnya terlihat premium.

• Reusable Widget: Daripada menulis ulang kode untuk kartu slider Tinggi dan Berat badan, kita membuat sebuah method _buildCard yang bisa digunakan berkali-kali. Kode jadi jauh lebih bersih (Clean Code)!

• Dialog Pop-up Kekinian: Hasil perhitungan tidak diarahkan ke halaman baru yang memakan waktu, melainkan muncul secara elegan melalui AlertDialog.

💻 Full Code: Mari Kita Coding!

Buka project Flutter kamu, pergi ke folder lib, dan timpa file main.dart dengan kode lengkap di bawah ini:

Dart

import 'package:flutter/material.dart';

void main() => runApp(const BMICalculatorApp());

class BMICalculatorApp extends StatelessWidget {
  const BMICalculatorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(
        primaryColor: const Color(0xFF0A0E21),
        scaffoldBackgroundColor: const Color(0xFF0A0E21),
      ),
      home: const BMIPage(),
    );
  }
}

class BMIPage extends StatefulWidget {
  const BMIPage({super.key});

  @override
  State<BMIPage> createState() => _BMIPageState();
}

class _BMIPageState extends State<BMIPage> {
  double height = 170;
  double weight = 60;

  void _showResult() {
    double bmi = weight / ((height / 100) * (height / 100));
    String status = bmi < 18.5 ? "Underweight" : bmi < 25 ? "Normal" : "Overweight";

    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        backgroundColor: const Color(0xFF1D1E33),
        title: const Text("Hasil BMI Anda", textAlign: TextAlign.center),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(bmi.toStringAsFixed(1), style: const TextStyle(fontSize: 50, fontWeight: FontWeight.bold)),
            Text(status, style: const TextStyle(fontSize: 20, color: Colors.blueAccent)),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Modern BMI Calculator"), centerTitle: true),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            _buildCard("Tinggi (cm)", height, (val) => setState(() => height = val), 100, 220),
            const SizedBox(height: 20),
            _buildCard("Berat (kg)", weight, (val) => setState(() => weight = val), 30, 150),
            const Spacer(),
            SizedBox(
              width: double.infinity,
              height: 60,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(backgroundColor: Colors.pinkAccent),
                onPressed: _showResult,
                child: const Text("HITUNG BMI", style: TextStyle(fontSize: 18)),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildCard(String label, double val, Function(double) onChanged, double min, double max) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(color: const Color(0xFF1D1E33), borderRadius: BorderRadius.circular(15)),
      child: Column(
        children: [
          Text(label, style: const TextStyle(fontSize: 18)),
          Text("${val.toInt()}", style: const TextStyle(fontSize: 40, fontWeight: FontWeight.bold)),
          Slider(value: val, min: min, max: max, onChanged: onChanged, activeColor: Colors.pinkAccent),
        ],
      ),
    );
  }
}

🔍 Bedah Logika Perhitungan BMI

Kalau kamu perhatikan di dalam method _showResult(), kita menggunakan rumus BMI standar global: BMI = Berat (kg) / (Tinggi (m) * Tinggi (m))

Dart

double bmi = weight / ((height / 100) * (height / 100));
String status = bmi < 18.5 ? "Underweight" : bmi < 25 ? "Normal" : "Overweight";

Karena slider kita menggunakan satuan centimeter (cm), kita membaginya dengan 100 terlebih dahulu untuk mengubahnya menjadi meter. Setelah itu, kita menggunakan Ternary Operator (? :) untuk menentukan status berat badan dengan sangat ringkas tanpa harus menggunakan banyak blok if-else.