Membuat BMI CALC APPS
Kalo kalian pengen nyoba di flutter ini codingannya tinggal salin aja :
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Elegant BMI App',
theme: ThemeData(
primaryColor: const Color(0xFF2BB3A3),
scaffoldBackgroundColor: const Color(0xFFF6FAFA),
fontFamily: 'Poppins',
),
home: const BmiPage(),
);
}
}
class BmiPage extends StatefulWidget {
const BmiPage({super.key});
@override
State<BmiPage> createState() => _BmiPageState();
}
class _BmiPageState extends State<BmiPage> {
final List<Map<String, dynamic>> bmiList = [];
final nama = TextEditingController();
final tinggi = TextEditingController();
final berat = TextEditingController();
double bmi = 0;
int? editIndex;
void hitungBMI() {
final t = double.parse(tinggi.text) / 100;
final b = double.parse(berat.text);
setState(() {
bmi = b / (t * t);
});
}
String kategori(double bmi) {
if (bmi < 18.5) return "Kurang Giji";
if (bmi < 25) return "Lumayan";
if (bmi < 30) return "Gendut";
return "Obesitas";
}
Color kategoriColor(double bmi) {
if (bmi < 18.5) return Colors.blue;
if (bmi < 25) return Colors.green;
if (bmi < 30) return Colors.orange;
return Colors.red;
}
void simpan() {
final data = {
'nama': nama.text,
'bmi': bmi,
};
setState(() {
if (editIndex == null) {
bmiList.add(data);
} else {
bmiList[editIndex!] = data;
editIndex = null;
}
});
nama.clear();
tinggi.clear();
berat.clear();
bmi = 0;
}
void edit(int index) {
setState(() {
nama.text = bmiList[index]['nama'];
bmi = bmiList[index]['bmi'];
editIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: const Text(
'BMI CALC APPS - ANU RIAN',
style: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
),
centerTitle: true,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(20),
child: Column(
children: [
// BMI RESULT CARD
Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(
colors: [Color(0xFF2BB3A3), Color(0xFF7EE8DF)],
),
),
child: Column(
children: [
const Text(
'Your BMI',
style: TextStyle(color: Colors.white70),
),
const SizedBox(height: 8),
Text(
bmi == 0 ? '--' : bmi.toStringAsFixed(1),
style: const TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
if (bmi > 0)
Text(
kategori(bmi),
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
const SizedBox(height: 20),
// FORM CARD
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16)),
elevation: 4,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
inputField(nama, 'Nama', Icons.person),
inputField(tinggi, 'Tinggi (cm)', Icons.height),
inputField(berat, 'Berat (kg)', Icons.monitor_weight),
const SizedBox(height: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF2BB3A3),
minimumSize: const Size(double.infinity, 48),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
),
onPressed: hitungBMI,
child: const Text('Hitung BMI'),
),
const SizedBox(height: 8),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
minimumSize: const Size(double.infinity, 48),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
),
onPressed: simpan,
child: Text(editIndex == null
? 'Simpan Data'
: 'Update Data'),
),
],
),
),
),
const SizedBox(height: 25),
// HISTORY
Align(
alignment: Alignment.centerLeft,
child: Text(
'History',
style: Theme.of(context).textTheme.titleLarge,
),
),
const SizedBox(height: 10),
bmiList.isEmpty
? const Text('Belum ada data')
: ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: bmiList.length,
itemBuilder: (context, i) {
final data = bmiList[i];
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)),
child: ListTile(
leading: CircleAvatar(
backgroundColor:
kategoriColor(data['bmi']),
child: Text(
data['bmi'].toStringAsFixed(1),
style: const TextStyle(color: Colors.white),
),
),
title: Text(data['nama']),
subtitle: Text(kategori(data['bmi'])),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.edit),
onPressed: () => edit(i),
),
IconButton(
icon: const Icon(Icons.delete,
color: Colors.red),
onPressed: () {
setState(() => bmiList.removeAt(i));
},
),
],
),
),
);
},
),
],
),
),
);
}
Widget inputField(
TextEditingController c, String label, IconData icon) {
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: TextField(
controller: c,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: label,
prefixIcon: Icon(icon),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
);
}
}
Deskripsi
Aplikasi BMI Calculator ini dibuat menggunakan Flutter dengan konsep (Create, Read, Update, Delete). Aplikasi memungkinkan pengguna untuk memasukkan data nama, tinggi badan, dan berat badan, kemudian menghitung nilai Body Mass Index (BMI) secara otomatis. Hasil perhitungan ditampilkan bersama kategori BMI serta disimpan dalam riwayat data yang dapat diedit dan dihapus. Tampilan aplikasi dirancang dengan gaya elegan dan modern agar mudah digunakan dan menarik secara visual.
Kesimpulan
Berdasarkan hasil pembuatan aplikasi ini, dapat disimpulkan bahwa Flutter mampu digunakan untuk membangun aplikasi mobile yang interaktif, responsif, dan memiliki tampilan yang menarik. Implementasi CRUD pada aplikasi BMI Calculator berjalan dengan baik dan membantu pengguna dalam mengelola data perhitungan BMI. Aplikasi ini dapat dikembangkan lebih lanjut dengan penambahan database, grafik, atau fitur login untuk meningkatkan fungsionalitas.
Oleh : Rian Rama Romansah
Komentar
Posting Komentar