membuat aplikasi BMI
## 📱 Belajar Flutter: Membuat Aplikasi BMI Sederhana
berikut codingan yang saya buat:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: BmiPage(),
);
}
}
class BmiPage extends StatefulWidget {
const BmiPage({super.key});
@override
State<BmiPage> createState() => _BmiPageState();
}
class _BmiPageState extends State<BmiPage> {
final TextEditingController nameController = TextEditingController();
final TextEditingController ageController = TextEditingController();
final TextEditingController heightController = TextEditingController();
final TextEditingController weightController = TextEditingController();
String gender = 'Laki-laki';
double bmi = 0;
void hitungBMI() {
final double? height =
double.tryParse(heightController.text);
final double? weight =
double.tryParse(weightController.text);
if (height == null || weight == null) return;
setState(() {
bmi = weight / ((height / 100) * (height / 100));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
title: const Text('BMI 💖'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
children: [
TextField(
controller: nameController,
decoration: const InputDecoration(
labelText: 'Nama',
),
),
const SizedBox(height: 10),
DropdownButtonFormField<String>(
value: gender,
items: const [
DropdownMenuItem(
value: 'Laki-laki',
child: Text('Laki-laki'),
),
DropdownMenuItem(
value: 'Perempuan',
child: Text('Perempuan'),
),
],
onChanged: (value) {
setState(() {
gender = value!;
});
},
decoration: const InputDecoration(
labelText: 'Jenis Kelamin',
),
),
const SizedBox(height: 10),
TextField(
controller: ageController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Umur',
),
),
const SizedBox(height: 10),
TextField(
controller: heightController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Tinggi Badan (cm)',
),
),
const SizedBox(height: 10),
TextField(
controller: weightController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Berat Badan (kg)',
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: hitungBMI,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.pinkAccent,
),
child: const Text('Hitung BMI'),
),
const SizedBox(height: 20),
if (bmi > 0)
Column(
children: [
Text(
'Nama: ${nameController.text}',
style: const TextStyle(fontSize: 16),
),
Text(
'Jenis Kelamin: $gender',
style: const TextStyle(fontSize: 16),
),
Text(
'Umur: ${ageController.text} tahun',
style: const TextStyle(fontSize: 16),
),
const SizedBox(height: 10),
Text(
'BMI: ${bmi.toStringAsFixed(1)}',
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
),
);
}
}
Di postingan kali ini, aku mau sharing hasil belajar Flutter dengan membuat **aplikasi BMI (Body Mass Index) sederhana**.
Aplikasi ini cocok banget buat pemula yang lagi belajar Flutter karena isinya masih basic tapi kepake banget.
Aplikasi ini dibuat pakai **Flutter dan bahasa Dart**, dengan tampilan sederhana dan warna pink biar nggak ngebosenin 😆
---
## ✨ Fitur yang Ada di Aplikasi
Di aplikasi BMI ini, pengguna bisa:
* Mengisi **nama**
* Memilih **jenis kelamin**
* Mengisi **umur**
* Menginput **tinggi badan (cm)**
* Menginput **berat badan (kg)**
* Menghitung nilai **BMI**
* Melihat hasil BMI langsung di layar
Semua data dimasukkan lewat form, lalu diproses setelah tombol **Hitung BMI** ditekan.
---
## 🧠 Cara Kerja Aplikasi
Perhitungan BMI di aplikasi ini menggunakan rumus standar:
**BMI = Berat Badan (kg) / (Tinggi Badan (m) × Tinggi Badan (m))**
Setelah pengguna mengisi data dan menekan tombol, aplikasi akan langsung menampilkan nilai BMI beserta informasi pengguna.
---
## 🛠 Teknologi yang Digunakan
Beberapa teknologi dan widget Flutter yang digunakan:
* Flutter
* Bahasa Dart
* `StatefulWidget`
* `TextField`
* `DropdownButtonFormField`
* `ElevatedButton`
* `setState()` untuk update tampilan
---
## 🎀 Tampilan Aplikasi
Untuk tampilannya, aku pakai **warna pink pastel** supaya kelihatan lebih lucu dan friendly.
Desainnya dibuat simpel agar mudah dipahami, terutama buat yang masih belajar Flutter.
---
## 📝 Penutup
Dari project kecil ini, aku jadi lebih paham:
* Cara membuat form input di Flutter
* Mengelola state menggunakan `setState()`
* Menggabungkan logika perhitungan dengan tampilan UI
Ke depannya, aplikasi ini masih bisa dikembangkan lagi, misalnya:
* Menambahkan kategori BMI (kurus, normal, gemuk, dll)
* Memisahkan halaman input dan hasil
* Memperbaiki desain UI supaya lebih menarik
jika kalian ingin mencoba yang ada pada gambar ini link nya :
https://zjz606vdjz70.zapp.page/#/
Semoga sharing ini bermanfaat, terutama buat teman-teman yang lagi belajar Flutter juga 🚀
Terima kasih sudah membaca 😊
Komentar
Posting Komentar