Aplikasi BMI Kalkulator

Aplikasi BMI Flutter dengan UI Modern

Aplikasi Body Mass Index berbasis Flutter dengan desain modern dan penyimpanan lokal

🔗 Lihat Demo Aplikasi

---

BMI (Body Mass Index) adalah metode sederhana untuk mengetahui apakah berat badan seseorang berada dalam kategori sehat atau tidak. Aplikasi ini dibuat menggunakan Flutter dengan fokus pada kemudahan penggunaan, tampilan modern, dan fitur yang relevan.

📸 Tampilan Aplikasi

Tampilan utama aplikasi BMI

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:intl/intl.dart';

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

/* ================= APP ================= */

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: _theme(),
      home: const BmiPage(),
    );
  }
}

/* ================= THEME ================= */

ThemeData _theme() {
  const deepTeal = Color(0xFF2D6B5F);
  const moss = Color(0xFF4A7C59);
  const red = Color(0xFFB85C4F);

  return ThemeData(
    useMaterial3: true,
    scaffoldBackgroundColor: const Color(0xFFF5F0E6),
    colorScheme: const ColorScheme.light(
      primary: deepTeal,
      secondary: moss,
      error: red,
    ),
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      fillColor: Colors.white,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(18),
        borderSide: BorderSide.none,
      ),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: deepTeal,
        foregroundColor: Colors.white,
        padding: const EdgeInsets.symmetric(vertical: 18),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18),
        ),
      ),
    ),
  );
}

/* ================= PAGE ================= */

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

  @override
  State createState() => _BmiPageState();
}

class _BmiPageState extends State {
  final _formKey = GlobalKey();
  final _age = TextEditingController();
  final _height = TextEditingController();
  final _weight = TextEditingController();

  double? _bmi;
  String _category = '';
  String _advice = '';
  Color _color = Colors.grey;

  List> _history = [];

  @override
  void initState() {
    super.initState();
    _loadHistory();
  }

  @override
  void dispose() {
    _age.dispose();
    _height.dispose();
    _weight.dispose();
    super.dispose();
  }

  /* ================= LOGIC ================= */

  Future _loadHistory() async {
    final prefs = await SharedPreferences.getInstance();
    final raw = prefs.getString('bmi_history');
    if (raw != null) {
      setState(() {
        _history = List>.from(jsonDecode(raw));
      });
    }
  }

  Future _saveHistory() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('bmi_history', jsonEncode(_history));
  }

  void _calculate() {
    if (!_formKey.currentState!.validate()) return;

    final h = double.parse(_height.text) / 100;
    final w = double.parse(_weight.text);
    final bmi = w / (h * h);

    if (bmi < 18.5) {
      _category = 'Kurus';
      _color = const Color(0xFFD4A574);
      _advice =
          '• Tambahkan kalori sehat (nasi, telur, alpukat)\n'
          '• Latihan kekuatan 2–3x/minggu\n'
          '• Tidur cukup & konsisten';
    } else if (bmi < 25) {
      _category = 'Ideal';
      _color = const Color(0xFF4A7C59);
      _advice =
          '• Pertahankan pola makan seimbang\n'
          '• Aktivitas fisik rutin\n'
          '• Hindari begadang berlebihan';
    } else if (bmi < 30) {
      _category = 'Berlebih';
      _color = const Color(0xFFE6A23C);
      _advice =
          '• Kurangi gula & gorengan\n'
          '• Jalan kaki 6–8 ribu langkah/hari\n'
          '• Perbanyak air putih';
    } else {
      _category = 'Obesitas';
      _color = const Color(0xFFB85C4F);
      _advice =
          '• Fokus perubahan kecil tapi konsisten\n'
          '• Kontrol porsi makan\n'
          '• Konsultasi profesional bila perlu';
    }

    setState(() {
      _bmi = bmi;
      _history.insert(0, {
        'date': DateTime.now().toIso8601String(),
        'bmi': bmi,
        'category': _category,
      });
    });

    _saveHistory();
    FocusScope.of(context).unfocus();
  }

  void _deleteHistory(int index) {
    setState(() => _history.removeAt(index));
    _saveHistory();
  }

  void _clearHistory() async {
    setState(() => _history.clear());
    final prefs = await SharedPreferences.getInstance();
    prefs.remove('bmi_history');
  }

  /* ================= UI ================= */

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          _header(),
          SliverPadding(
            padding: const EdgeInsets.all(20),
            sliver: SliverToBoxAdapter(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _form(),
                  if (_bmi != null) _resultRow(),
                  if (_history.isNotEmpty) _historySection(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  /* ================= WIDGETS ================= */

  SliverToBoxAdapter _header() => SliverToBoxAdapter(
        child: Container(
          padding: const EdgeInsets.fromLTRB(24, 60, 24, 32),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Color(0xFF2D6B5F), Color(0xFF4A7C59)],
            ),
            borderRadius:
                BorderRadius.vertical(bottom: Radius.circular(30)),
          ),
          child: const Text(
            'BMI Tracker\nPantau Kesehatanmu',
            style: TextStyle(color: Colors.white, fontSize: 26),
          ),
        ),
      );

  Widget _form() => Form(
        key: _formKey,
        child: Column(
          children: [
            _input(_age, 'Umur', 'th'),
            _input(_height, 'Tinggi', 'cm'),
            _input(_weight, 'Berat', 'kg'),
            const SizedBox(height: 16),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: _calculate,
                child: const Text('Hitung BMI'),
              ),
            ),
            const SizedBox(height: 24),
          ],
        ),
      );

  Widget _resultRow() => Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: _card(
              Column(
                children: [
                  Text(
                    _bmi!.toStringAsFixed(1),
                    style: TextStyle(
                        fontSize: 42,
                        fontWeight: FontWeight.bold,
                        color: _color),
                  ),
                  Text(_category,
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                          color: _color)),
                ],
              ),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: _card(
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('Saran',
                      style:
                          TextStyle(fontWeight: FontWeight.bold)),
                  const SizedBox(height: 8),
                  Text(_advice),
                ],
              ),
            ),
          ),
        ],
      );

  Widget _historySection() => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('Riwayat',
                  style:
                      TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              TextButton(
                onPressed: _clearHistory,
                child: const Text('Hapus Semua'),
              ),
            ],
          ),
          ..._history.asMap().entries.map((e) {
            final h = e.value;
            final date = DateFormat('dd MMM yyyy – HH:mm')
                .format(DateTime.parse(h['date']));
            return Dismissible(
              key: Key(h['date']),
              direction: DismissDirection.endToStart,
              onDismissed: (_) => _deleteHistory(e.key),
              background: Container(
                alignment: Alignment.centerRight,
                padding: const EdgeInsets.only(right: 20),
                color: Colors.red,
                child:
                    const Icon(Icons.delete, color: Colors.white),
              ),
              child: Card(
                child: ListTile(
                  title: Text(h['category']),
                  subtitle: Text(date),
                  trailing:
                      Text((h['bmi'] as double).toStringAsFixed(1)),
                ),
              ),
            );
          }),
        ],
      );

  Widget _input(
          TextEditingController c, String label, String unit) =>
      Padding(
        padding: const EdgeInsets.only(bottom: 12),
        child: TextFormField(
          controller: c,
          keyboardType: TextInputType.number,
          inputFormatters: [
            FilteringTextInputFormatter.allow(RegExp(r'[0-9.]'))
          ],
          decoration:
              InputDecoration(labelText: label, suffixText: unit),
          validator: (v) =>
              v == null || v.isEmpty ? 'Wajib diisi' : null,
        ),
      );

  Widget _card(Widget child) => Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(18),
        ),
        child: child,
      );
}


  

🎯 Fitur Utama

• Input umur, tinggi badan, dan berat badan tanpa slider
• Perhitungan BMI otomatis
• Kategori BMI yang mudah dipahami
• Saran kesehatan berdasarkan hasil BMI
• Riwayat perhitungan tersimpan di local storage
• Fitur hapus riwayat
• Desain UI modern dan bersih

💡 Saran Kesehatan

Aplikasi ini tidak hanya menampilkan angka BMI, tetapi juga memberikan saran kesehatan yang disesuaikan dengan kategori hasil perhitungan. Dengan begitu, pengguna dapat memahami langkah sederhana yang bisa dilakukan untuk menjaga atau memperbaiki kondisi tubuh.

Catatan: Hasil BMI bersifat informatif dan tidak menggantikan konsultasi medis profesional.