Membuat Aplikasi BMI Sederhana dengan Flutter di DartPad
Pendahuluan
Perkembangan teknologi membuat aplikasi mobile menjadi bagian penting dalam kehidupan sehari-hari. Untuk membuat aplikasi mobile, salah satu framework yang banyak digunakan adalah Flutter.
Flutter merupakan framework open-source yang dikembangkan oleh Google untuk membangun aplikasi dari satu basis kode (single codebase). Dengan Flutter, developer dapat membuat aplikasi untuk berbagai platform seperti Android, iOS, web, dan desktop.
Pada artikel ini, kita akan mempelajari cara membuat aplikasi BMI (Body Mass Index) sederhana menggunakan Flutter melalui DartPad. Proyek ini cocok bagi pemula karena dapat memperkenalkan konsep dasar Flutter sekaligus melatih logika pemrograman menggunakan Dart.
---
Apa Itu Flutter?
Flutter adalah framework UI yang menggunakan bahasa pemrograman Dart. Flutter memungkinkan developer membuat tampilan aplikasi menggunakan berbagai komponen yang disebut widget.
Salah satu keunggulan Flutter adalah konsep single codebase. Artinya, developer dapat menggunakan sebagian besar kode yang sama untuk membangun aplikasi pada beberapa platform.
Contohnya:
- Android
- iOS
- Web
- Windows
- macOS
- Linux
Flutter juga memiliki fitur Hot Reload yang memungkinkan developer melihat perubahan kode dengan cepat tanpa harus menjalankan ulang aplikasi dari awal.
---
Apa Itu Dart?
Sebelum mempelajari Flutter, kita perlu mengenal Dart.
Dart adalah bahasa pemrograman yang digunakan oleh Flutter. Dart menangani logika program, seperti:
- Variabel
- Fungsi
- Percabangan
- Perulangan
- Operator
- Class dan object
- Pengolahan data
Sederhananya:
Dart = bahasa pemrogramannya
Flutter = framework untuk membuat tampilan dan aplikasi
Keduanya bekerja bersama untuk membangun aplikasi Flutter.
---
Apa Itu DartPad?
DartPad adalah editor online yang dapat digunakan untuk menulis dan menjalankan kode Dart dan Flutter langsung melalui browser.
DartPad sangat membantu pemula karena kita tidak perlu langsung menginstal Flutter SDK, Android Studio, atau IDE lainnya hanya untuk mencoba kode sederhana.
Dengan DartPad, kita dapat:
1. Menulis kode Dart.
2. Membuat aplikasi Flutter sederhana.
3. Menjalankan kode.
4. Melihat hasil secara langsung.
5. Bereksperimen dengan widget Flutter.
Namun, DartPad memiliki keterbatasan dibandingkan lingkungan pengembangan Flutter lengkap. Untuk proyek yang lebih besar, developer biasanya menggunakan Flutter SDK bersama IDE seperti Visual Studio Code atau Android Studio.
---
Mengenal Widget dalam Flutter
Hal penting dalam Flutter adalah widget.
Flutter membangun antarmuka aplikasi menggunakan widget. Hampir setiap bagian dari tampilan aplikasi dapat berupa widget.
Contohnya:
Widget| Fungsi
"MaterialApp"| Struktur utama aplikasi
"Scaffold"| Struktur halaman
"AppBar"| Bagian atas aplikasi
"Text"| Menampilkan teks
"TextField"| Menerima input pengguna
"ElevatedButton"| Membuat tombol
"Column"| Menyusun widget secara vertikal
"Row"| Menyusun widget secara horizontal
"Container"| Membuat wadah untuk mengatur tampilan
"Padding"| Memberikan jarak
"Card"| Membuat tampilan berbentuk kartu
Konsep widget inilah yang menjadi salah satu dasar penting dalam mempelajari Flutter.
---
Apa Itu BMI?
BMI atau Body Mass Index adalah perhitungan yang menggunakan berat dan tinggi badan.
Rumusnya:
BMI = berat badan (kg) ÷ tinggi badan² (m)
Sebagai contoh:
- Berat = 60 kg
- Tinggi = 1,65 m
Maka:
BMI = 60 ÷ (1,65 × 1,65)
Hasilnya sekitar 22,04.
Program kemudian dapat memberikan kategori berdasarkan rentang yang digunakan.
«BMI adalah indikator sederhana, bukan diagnosis kesehatan. Untuk anak dan remaja, interpretasi BMI juga berbeda dari orang dewasa karena perlu mempertimbangkan usia dan jenis kelamin.»
---
Persiapan Membuat Aplikasi
Untuk mencoba proyek ini, kita membutuhkan:
1. Browser.
2. Koneksi internet.
3. DartPad.
4. Pengetahuan dasar Dart.
Setelah membuka DartPad, pilih mode Flutter kemudian masukkan kode program.
---
Membuat Aplikasi BMI
Berikut contoh aplikasi BMI sederhana menggunakan Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(const BMIApp());
}
class BMIApp extends StatelessWidget {
const BMIApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'BMI Calculator',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const BMIPage(),
);
}
}
class BMIPage extends StatefulWidget {
const BMIPage({super.key});
@override
State<BMIPage> createState() => _BMIPageState();
}
class _BMIPageState extends State<BMIPage> {
final TextEditingController beratController =
TextEditingController();
final TextEditingController tinggiController =
TextEditingController();
double? bmi;
String kategori = '';
void hitungBMI() {
double? berat = double.tryParse(beratController.text);
double? tinggi = double.tryParse(tinggiController.text);
if (berat == null || tinggi == null || berat <= 0 || tinggi <= 0) {
setState(() {
bmi = null;
kategori = 'Masukkan data yang valid.';
});
return;
}
double tinggiMeter = tinggi / 100;
double hasil = berat / (tinggiMeter * tinggiMeter);
String hasilKategori;
if (hasil < 18.5) {
hasilKategori = 'Berat badan kurang';
} else if (hasil < 25) {
hasilKategori = 'Rentang umum';
} else if (hasil < 30) {
hasilKategori = 'Berat badan berlebih';
} else {
hasilKategori = 'Obesitas';
}
setState(() {
bmi = hasil;
kategori = hasilKategori;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BMI Calculator'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
const Text(
'Hitung BMI',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
TextField(
controller: beratController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Berat badan (kg)',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 15),
TextField(
controller: tinggiController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Tinggi badan (cm)',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: hitungBMI,
child: const Text('Hitung BMI'),
),
const SizedBox(height: 30),
if (bmi != null)
Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
const Text(
'Hasil BMI',
style: TextStyle(fontSize: 20),
),
const SizedBox(height: 10),
Text(
bmi!.toStringAsFixed(2),
style: const TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
Text(kategori),
],
),
),
)
else
Text(kategori),
],
),
),
);
}
}
---
Penjelasan Struktur Program
1. Import Flutter
import 'package:flutter/material.dart';
Kode tersebut mengimpor library Material Design dari Flutter.
Library ini menyediakan berbagai widget siap pakai seperti:
- "AppBar"
- "Text"
- "TextField"
- "Button"
- "Card"
- "Scaffold"
---
2. Menjalankan Aplikasi
void main() {
runApp(const BMIApp());
}
"main()" merupakan fungsi pertama yang dijalankan oleh program.
Kemudian "runApp()" digunakan untuk menjalankan widget utama aplikasi.
---
3. StatelessWidget
class BMIApp extends StatelessWidget
"StatelessWidget" digunakan ketika sebuah widget tidak memiliki data yang berubah selama widget tersebut digunakan.
Pada bagian ini, kita mengatur konfigurasi utama aplikasi seperti judul dan halaman awal.
---
4. StatefulWidget
Bagian halaman BMI menggunakan:
class BMIPage extends StatefulWidget
Mengapa menggunakan "StatefulWidget"?
Karena hasil BMI akan berubah setelah pengguna menekan tombol Hitung BMI.
Ketika data berubah, Flutter dapat membangun ulang bagian tampilan yang diperlukan.
---
5. TextEditingController
final TextEditingController beratController =
TextEditingController();
Controller digunakan untuk mengambil teks yang dimasukkan pengguna melalui "TextField".
Program menggunakan dua controller:
- "beratController" untuk berat badan.
- "tinggiController" untuk tinggi badan.
---
6. TextField
TextField(
controller: beratController,
keyboardType: TextInputType.number,
)
"TextField" digunakan untuk menerima input dari pengguna.
Dalam aplikasi ini, pengguna memasukkan:
- Berat badan dalam kilogram.
- Tinggi badan dalam sentimeter.
---
7. Fungsi "hitungBMI()"
Fungsi ini merupakan inti dari aplikasi.
Program mengambil data dari input, mengubah tinggi dari sentimeter menjadi meter, kemudian menghitung BMI.
double tinggiMeter = tinggi / 100;
double hasil = berat / (tinggiMeter * tinggiMeter);
Setelah mendapatkan hasil, program menggunakan percabangan untuk menentukan kategori.
---
8. "setState()"
Salah satu konsep Flutter yang sangat penting adalah:
setState(() {
bmi = hasil;
kategori = hasilKategori;
});
"setState()" memberi tahu Flutter bahwa terdapat perubahan data sehingga tampilan perlu diperbarui.
Misalnya sebelum tombol ditekan, hasil BMI belum tersedia.
Setelah tombol ditekan dan perhitungan berhasil, "setState()" menyebabkan hasil baru muncul pada layar.
---
9. Scaffold
Scaffold(
appBar: AppBar(
title: const Text('BMI Calculator'),
),
)
"Scaffold" menyediakan struktur dasar halaman aplikasi Material.
Struktur sederhananya:
Scaffold
→ AppBar
→ Body
→ FloatingActionButton
→ dan komponen lainnya
Dalam aplikasi BMI, kita menggunakan "AppBar" dan "body".
---
10. Column
Column(
children: [
...
],
)
"Column" digunakan untuk menyusun widget secara vertikal.
Pada aplikasi BMI, susunannya menjadi:
Judul → Input berat → Input tinggi → Tombol → Hasil
---
11. Card
Card(
child: Padding(
...
),
)
"Card" digunakan untuk membuat area hasil terlihat seperti sebuah kartu sehingga informasi BMI lebih mudah dibaca.
---
Alur Kerja Aplikasi
Cara kerja aplikasi dapat digambarkan seperti berikut:
Pengguna membuka aplikasi
↓
Memasukkan berat badan
↓
Memasukkan tinggi badan
↓
Menekan tombol "Hitung BMI"
↓
Program memvalidasi input
↓
Program menghitung BMI
↓
Program menentukan kategori
↓
"setState()" memperbarui tampilan
↓
Hasil BMI ditampilkan
---
Mengapa Proyek Ini Bagus untuk Belajar Flutter?
Aplikasi BMI memang sederhana, tetapi memiliki banyak konsep penting yang dapat menjadi dasar untuk proyek yang lebih besar.
Melalui proyek ini, kita belajar:
- Struktur aplikasi Flutter.
- Penggunaan widget.
- "StatelessWidget".
- "StatefulWidget".
- "TextField".
- "TextEditingController".
- Button.
- "Column".
- "Card".
- Fungsi.
- Percabangan.
- Validasi input.
- "setState()".
- Perhitungan matematika.
Jadi, jangan melihat aplikasi BMI hanya sebagai kalkulator sederhana. Proyek ini dapat menjadi latihan kecil untuk memahami bagaimana sebuah aplikasi Flutter menerima input, memproses data, kemudian menampilkan hasil kepada pengguna.
---
Ide Pengembangan Selanjutnya
Setelah aplikasi dasar berhasil dibuat, kita dapat mengembangkannya menjadi lebih menarik.
Beberapa fitur yang dapat ditambahkan:
1. Tampilan yang lebih modern
Tambahkan warna, icon, card, animasi, dan layout yang lebih menarik.
2. Reset
Tambahkan tombol untuk menghapus input dan hasil.
3. Validasi yang lebih baik
Program dapat memberikan pesan ketika pengguna memasukkan data yang kosong atau tidak valid.
4. Riwayat
Hasil perhitungan dapat disimpan sehingga pengguna dapat melihat data sebelumnya.
5. Responsif
Tampilan dapat disesuaikan agar nyaman digunakan pada berbagai ukuran layar.
6. Navigasi
Aplikasi dapat memiliki beberapa halaman, misalnya:
Home → Kalkulator BMI → Informasi → Tentang Aplikasi
---
Kesimpulan
Membuat aplikasi BMI menggunakan Flutter di DartPad merupakan proyek sederhana yang sangat cocok untuk pemula yang ingin mulai mempelajari pengembangan aplikasi.
Dalam proyek ini, kita tidak hanya belajar menghitung BMI, tetapi juga mempelajari konsep penting Flutter seperti widget, StatefulWidget, TextField, controller, setState, layout, dan event tombol.
Dart berperan sebagai bahasa pemrograman yang mengatur logika aplikasi, sedangkan Flutter menyediakan framework dan widget untuk membangun antarmuka pengguna. DartPad kemudian menjadi tempat yang praktis untuk mencoba kode Flutter secara langsung tanpa harus menyiapkan lingkungan pengembangan yang kompleks.
Dengan memahami proyek sederhana seperti BMI, kita memiliki dasar untuk melanjutkan ke proyek Flutter yang lebih kompleks, seperti aplikasi catatan, kalkulator keuangan, aplikasi edukasi, hingga aplikasi mobile yang terhubung dengan database dan API.
Komentar
Posting Komentar