Praktikum Flutter: Aplikasi Jadwal Pelajaran

CRUD + setState — Panduan Lengkap Step-by-Step

PENDAHULUAN

Pada praktikum ini, kita akan membangun aplikasi sederhana menggunakan Flutter untuk mengelola jadwal pelajaran. Aplikasi ini memiliki fitur CRUD (Create, Read, Update, Delete) dengan manajemen state menggunakan setState().

Tujuan Utama:

• Memahami konsep dasar Flutter
• Mengimplementasikan CRUD sederhana
• Mengelola state tanpa state management tambahan

⚠️ PERSIAPAN

Pastikan sudah:

• Menginstall Flutter SDK
• Menggunakan editor seperti VS Code atau Android Studio
• Menjalankan emulator atau device fisik

flutter create jadwal_app
cd jadwal_app
flutter run

1. Struktur Data

Kita buat model sederhana untuk jadwal dengan 3 atribut utama:

jadwal.dart

class Jadwal {
  String mapel;
  String hari;
  String jam;

  Jadwal({required this.mapel, required this.hari, required this.jam});
}

💡 Tip: Keyword required memastikan tidak ada atribut yang terlewat saat objek dibuat.

2. State Management dengan setState

Data jadwal disimpan dalam sebuah List<Jadwal>. Setiap perubahan data dibungkus setState() agar UI otomatis update.

state.dart

List<Jadwal> jadwalList = [];

3. Tampilan Utama — Read

Menampilkan daftar jadwal menggunakan ListView.builder dengan aksi edit dan delete di setiap item:

main.dart — ListView

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: () => editJadwal(index),
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () => deleteJadwal(index),
          ),
        ],
      ),
    );
  },
)

CREATE

Menambahkan jadwal baru ke dalam list via dialog form

UPDATE

Mengubah data jadwal berdasarkan index yang dipilih

DELETE

Menghapus data jadwal dari list berdasarkan index

4. Create — Tambah Data

create.dart

void tambahJadwal(String mapel, String hari, String jam) {
  setState(() {
    jadwalList.add(Jadwal(mapel: mapel, hari: hari, jam: jam));
  });
}

5. Update — Edit Data

update.dart

void updateJadwal(int index, String mapel, String hari, String jam) {
  setState(() {
    jadwalList[index] = Jadwal(mapel: mapel, hari: hari, jam: jam);
  });
}

6. Delete — Hapus Data

delete.dart

void deleteJadwal(int index) {
  setState(() {
    jadwalList.removeAt(index);
  });
}

7. Form Input dengan Dialog

Input menggunakan 3 buah TextEditingController yang ditampilkan dalam dialog:

📝 TextField → Mapel 📅 TextField → Hari 🕐 TextField → Jam

form_dialog.dart

TextEditingController mapelController = TextEditingController();
TextEditingController hariController = TextEditingController();
TextEditingController jamController = TextEditingController();

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text("Tambah 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: () {
            tambahJadwal(
              mapelController.text,
              hariController.text,
              jamController.text,
            );
            Navigator.pop(context);
          },
          child: Text("Simpan"),
        ),
      ],
    );
  },
);

⚠️ Perhatian: Pada versi ini belum ada validasi input. Field kosong tetap bisa disimpan. Untuk perbaikan, lihat bagian Saran Pengembangan di bawah.

8. Alur Data CRUD

User klik Tambah

Dialog Form muncul

setState() dipanggil

ListView rebuild

9. Kesimpulan

✅ Yang Dipelajari

• CRUD sederhana di Flutter
• Penggunaan setState()
• Pengelolaan data dengan List

⛔ Keterbatasan

• setState tidak scalable
• Data hilang saat restart
• Belum ada validasi

📌 Penting: setState() hanya cocok untuk aplikasi kecil. Untuk skala lebih besar, gunakan Provider, Riverpod, atau Bloc.

10. Saran Pengembangan

🛡️

Validasi Input

Cegah data kosong & format salah

🗄️

Database Lokal

SQLite atau Hive untuk persistensi

🔍

Fitur Pencarian

Filter jadwal berdasarkan hari/mapel

⚙️

State Management

Migrasi ke Riverpod atau Bloc

🔒 Penutup

Aplikasi ini menjadi dasar penting sebelum masuk ke Flutter yang lebih kompleks. Fokus pada pemahaman alur data dan update UI, karena itu inti dari reactive programming di Flutter.