Artikel Praktikum Flutter
Praktikum Flutter: Membangun Aplikasi Jadwal Pelajaran dengan CRUD dan setState
Tujuan Praktikum
· Memahami konsep CRUD (Create, Read, Update, Delete) dalam Flutter.
· Mengimplementasikan state management sederhana menggunakan setState.
· Membangun aplikasi jadwal pelajaran yang fungsional.
Dasar Teori
CRUD adalah operasi dasar pada aplikasi yang berinteraksi dengan data. setState adalah metode bawaan Flutter untuk memberitahu framework bahwa state internal suatu widget berubah, sehingga perlu dilakukan rebuild pada UI.
Alat dan Bahan
· Flutter SDK (versi terbaru)
· Editor (VS Code / Android Studio)
· Emulator atau perangkat fisik
Langkah Praktikum
1. Membuat Proyek Baru
```bash
flutter create jadwal_pelajaran
cd jadwal_pelajaran
```
2. Membuat Model Data
Buat file models/jadwal.dart:
```dart
class JadwalPelajaran {
String hari;
String mataPelajaran;
String jamMulai;
String jamSelesai;
JadwalPelajaran({
required this.hari,
required this.mataPelajaran,
required this.jamMulai,
required this.jamSelesai,
});
}
```
3. Membangun UI Utama
Edit lib/main.dart:
```dart
import 'package:flutter/material.dart';
import 'models/jadwal.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Jadwal Pelajaran',
theme: ThemeData(primarySwatch: Colors.blue),
home: JadwalPage(),
);
}
}
class JadwalPage extends StatefulWidget {
@override
_JadwalPageState createState() => _JadwalPageState();
}
class _JadwalPageState extends State<JadwalPage> {
List<JadwalPelajaran> jadwalList = [];
final List<String> daftarHari = [
'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Jadwal Pelajaran'),
centerTitle: true,
),
body: jadwalList.isEmpty
? Center(child: Text('Belum ada jadwal'))
: ListView.builder(
itemCount: jadwalList.length,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.all(8),
child: ListTile(
title: Text(jadwalList[index].mataPelajaran),
subtitle: Text(
'${jadwalList[index].hari} | ${jadwalList[index].jamMulai} - ${jadwalList[index].jamSelesai}'
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.edit, color: Colors.blue),
onPressed: () => _editJadwal(context, index),
),
IconButton(
icon: Icon(Icons.delete, color: Colors.red),
onPressed: () => _deleteJadwal(index),
),
],
),
),
);
},
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => _tambahJadwal(context),
),
);
}
}
```
4. Implementasi Operasi CRUD
Masih dalam class _JadwalPageState, tambahkan method:
```dart
void _tambahJadwal(BuildContext context) {
showDialog(
context: context,
builder: (context) => _FormJadwal(
onSubmit: (jadwalBaru) {
setState(() {
jadwalList.add(jadwalBaru);
});
Navigator.pop(context);
},
),
);
}
void _editJadwal(BuildContext context, int index) {
showDialog(
context: context,
builder: (context) => _FormJadwal(
jadwalAwal: jadwalList[index],
onSubmit: (jadwalEdit) {
setState(() {
jadwalList[index] = jadwalEdit;
});
Navigator.pop(context);
},
),
);
}
void _deleteJadwal(int index) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Hapus Jadwal'),
content: Text('Yakin ingin menghapus ${jadwalList[index].mataPelajaran}?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Batal'),
),
TextButton(
onPressed: () {
setState(() {
jadwalList.removeAt(index);
});
Navigator.pop(context);
},
child: Text('Hapus', style: TextStyle(color: Colors.red)),
),
],
),
);
}
```
5. Membuat Form Dialog
Di luar class _JadwalPageState, tambahkan:
```dart
class _FormJadwal extends StatefulWidget {
final JadwalPelajaran? jadwalAwal;
final Function(JadwalPelajaran) onSubmit;
_FormJadwal({this.jadwalAwal, required this.onSubmit});
@override
__FormJadwalState createState() => __FormJadwalState();
}
class __FormJadwalState extends State<_FormJadwal> {
final _formKey = GlobalKey<FormState>();
late String _hari, _mataPelajaran, _jamMulai, _jamSelesai;
final List<String> daftarHari = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];
@override
void initState() {
super.initState();
if (widget.jadwalAwal != null) {
_hari = widget.jadwalAwal!.hari;
_mataPelajaran = widget.jadwalAwal!.mataPelajaran;
_jamMulai = widget.jadwalAwal!.jamMulai;
_jamSelesai = widget.jadwalAwal!.jamSelesai;
} else {
_hari = daftarHari.first;
_mataPelajaran = '';
_jamMulai = '';
_jamSelesai = '';
}
}
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(widget.jadwalAwal == null ? 'Tambah Jadwal' : 'Edit Jadwal'),
content: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
DropdownButtonFormField(
value: _hari,
items: daftarHari.map((hari) {
return DropdownMenuItem(value: hari, child: Text(hari));
}).toList(),
onChanged: (value) => setState(() => _hari = value!),
decoration: InputDecoration(labelText: 'Hari'),
validator: (value) => value == null ? 'Pilih hari' : null,
),
TextFormField(
initialValue: _mataPelajaran,
decoration: InputDecoration(labelText: 'Mata Pelajaran'),
onChanged: (value) => _mataPelajaran = value,
validator: (value) => value!.isEmpty ? 'Isi mata pelajaran' : null,
),
TextFormField(
initialValue: _jamMulai,
decoration: InputDecoration(labelText: 'Jam Mulai (HH:MM)'),
onChanged: (value) => _jamMulai = value,
validator: (value) => value!.isEmpty ? 'Isi jam mulai' : null,
),
TextFormField(
initialValue: _jamSelesai,
decoration: InputDecoration(labelText: 'Jam Selesai (HH:MM)'),
onChanged: (value) => _jamSelesai = value,
validator: (value) => value!.isEmpty ? 'Isi jam selesai' : null,
),
],
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Batal'),
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
widget.onSubmit(
JadwalPelajaran(
hari: _hari,
mataPelajaran: _mataPelajaran,
jamMulai: _jamMulai,
jamSelesai: _jamSelesai,
),
);
}
},
child: Text('Simpan'),
),
],
);
}
}
```
Hasil dan Pembahasan
Fitur yang Dihasilkan:
1. Create: Tombol + membuka form untuk menambah jadwal baru.
2. Read: Data ditampilkan dalam ListView menggunakan Card.
3. Update: Tombol edit (pensil) membuka form dengan data terisi.
4. Delete: Tombol hapus (tong sampah) dengan konfirmasi AlertDialog.
Peran setState:
· Setiap operasi CRUD dibungkus dalam setState().
· Saat setState() dipanggil, method build() dijalankan ulang.
· UI langsung merefleksikan perubahan data terbaru.
Kesimpulan
· setState cocok untuk state management sederhana pada satu halaman.
· Pola CRUD mudah diimplementasikan dengan List sebagai penyimpanan sementara.
· Form dialog dan validasi meningkatkan pengalaman pengguna.
Tugas Lanjutan
1. Tambahkan fitur penyimpanan data menggunakan SharedPreferences atau SQLite.
2. Implementasikan filter jadwal berdasarkan hari.
3. Tambahkan fitur notifikasi sebelum jadwal dimulai.
Komentar
Posting Komentar