Praktikum Flutter: Aplikasi Jadwal Pelajaran (CRUD + setState)
Berikut versi yang sudah dirapikan dan lebih sistematis 👇
---
Praktikum Flutter: Aplikasi Jadwal Pelajaran (CRUD + setState)
Pendahuluan
Pada praktikum ini, akan dibuat sebuah aplikasi sederhana menggunakan Flutter untuk mengelola jadwal pelajaran. Aplikasi ini menerapkan konsep CRUD (Create, Read, Update, Delete) dan menggunakan setState untuk memperbarui tampilan secara dinamis.
Praktikum ini sangat cocok bagi pemula yang ingin memahami manajemen state dasar di Flutter tanpa menggunakan library tambahan seperti Provider atau Bloc.
---
Tujuan
Setelah menyelesaikan praktikum ini, diharapkan dapat:
Membuat tampilan list data di Flutter
Menambahkan data (Create)
Menampilkan data (Read)
Mengubah data (Update)
Menghapus data (Delete)
Menggunakan setState untuk memperbarui UI
---
Persiapan
Sebelum memulai, pastikan telah:
Menginstal Flutter SDK
Menggunakan editor seperti VS Code atau Android Studio
Membuat project baru dengan perintah:
flutter create jadwal_pelajaran_app
cd jadwal_pelajaran_app
---
Struktur Data
Aplikasi menggunakan struktur data sederhana berupa List of Map:
List<Map<String, String>> jadwalList = [];
Setiap data berisi:
mapel → nama pelajaran
hari → hari pelajaran
jam → jam pelajaran
---
Implementasi Aplikasi
1. Tampilan Utama (Home Page)
Ubah file main.dart menjadi seperti berikut:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: JadwalPage(),
);
}
}
class JadwalPage extends StatefulWidget {
@override
_JadwalPageState createState() => _JadwalPageState();
}
class _JadwalPageState extends State<JadwalPage> {
List<Map<String, String>> jadwalList = [];
void tambahJadwal(String mapel, String hari, String jam) {
setState(() {
jadwalList.add({
'mapel': mapel,
'hari': hari,
'jam': jam,
});
});
}
void hapusJadwal(int index) {
setState(() {
jadwalList.removeAt(index);
});
}
void editJadwal(int index, String mapel, String hari, String jam) {
setState(() {
jadwalList[index] = {
'mapel': mapel,
'hari': hari,
'jam': jam,
};
});
}
void showForm({int? index}) {
TextEditingController mapelController = TextEditingController();
TextEditingController hariController = TextEditingController();
TextEditingController jamController = TextEditingController();
if (index != null) {
mapelController.text = jadwalList[index]['mapel']!;
hariController.text = jadwalList[index]['hari']!;
jamController.text = jadwalList[index]['jam']!;
}
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text(index == null ? "Tambah Jadwal" : "Edit Jadwal"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: mapelController,
decoration: InputDecoration(labelText: "Mapel"),
),
TextField(
controller: hariController,
decoration: InputDecoration(labelText: "Hari"),
),
TextField(
controller: jamController,
decoration: InputDecoration(labelText: "Jam"),
),
],
),
actions: [
TextButton(
onPressed: () {
if (index == null) {
tambahJadwal(
mapelController.text,
hariController.text,
jamController.text,
);
} else {
editJadwal(
index,
mapelController.text,
hariController.text,
jamController.text,
);
}
Navigator.pop(context);
},
child: Text("Simpan"),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Jadwal Pelajaran"),
),
body: ListView.builder(
itemCount: jadwalList.length,
itemBuilder: (context, index) {
final item = jadwalList[index];
return ListTile(
title: Text(item['mapel']!),
subtitle: Text("${item['hari']} - ${item['jam']}"),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.edit),
onPressed: () => showForm(index: index),
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () => hapusJadwal(index),
),
],
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => showForm(),
child: Icon(Icons.add),
),
);
}
}
---
Penjelasan
1. setState
Fungsi setState() digunakan untuk memberi tahu Flutter bahwa data telah berubah sehingga UI harus diperbarui.
Contoh:
setState(() {
jadwalList.add(data);
});
---
2. Implementasi CRUD
Operasi Fungsi
Create tambahJadwal()
Read ListView.builder
Update editJadwal()
Delete hapusJadwal()
---
3. Dialog Input
Form input menggunakan AlertDialog agar pengguna dapat menambah atau mengedit data tanpa berpindah halaman.
---
Hasil Akhir
Aplikasi yang dibuat memiliki fitur:
Menampilkan daftar jadwal pelajaran
Menambahkan jadwal baru
Mengedit jadwal
Menghapus jadwal
Perubahan langsung terlihat (real-time) dengan setState
---
Kesimpulan
Praktikum ini menunjukkan cara membuat aplikasi CRUD sederhana di Flutter menggunakan setState. Metode ini cocok untuk aplikasi kecil dan sederhana. Namun, untuk aplikasi yang lebih kompleks, disarankan menggunakan state management seperti Provider, Bloc, atau Riverpod.
---
Kalau kamu mau, aku bisa bantu bikin versi **laporan lengkap (BAB 1–5)** biar langsung siap dikumpulin 👍
Komentar
Posting Komentar