Praktikum Flutter: Aplikasi Jadwal Pelajaran (CRUD + setState)

Pendahuluan

Dalam praktikum ini, kita akan membuat aplikasi sederhana menggunakan Flutter untuk mengelola jadwal pelajaran. Aplikasi ini akan memiliki fitur CRUD (Create, Read, Update, Delete) dan menggunakan setState untuk mengelola perubahan data secara dinamis pada UI.

Aplikasi ini cocok untuk pemula karena tidak menggunakan database eksternal—data disimpan sementara di memori aplikasi.

---

Tujuan Praktikum

• Memahami konsep dasar CRUD

• Menggunakan setState untuk memperbarui UI

• Membuat form input di Flutter

• Menampilkan data dalam bentuk list

---

Persiapan

Pastikan Anda sudah:

• Menginstall Flutter SDK

• Menggunakan editor seperti VS Code atau Android Studio

• Membuat project baru:

flutter create jadwal_pelajaran_app

---

Struktur Data

Kita akan menggunakan model sederhana untuk menyimpan data jadwal:

class Jadwal {
  String hari;
  String mataPelajaran;
  String jam;

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

---

Tampilan Utama (Main Screen)

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: JadwalPage(),
    debugShowCheckedModeBanner: false,
  ));
}

class JadwalPage extends StatefulWidget {
  @override
  _JadwalPageState createState() => _JadwalPageState();
}

class _JadwalPageState extends State<JadwalPage> {
  List<Jadwal> listJadwal = [];

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

  void tambahJadwal() {
    setState(() {
      listJadwal.add(Jadwal(
        hari: hariController.text,
        mataPelajaran: mapelController.text,
        jam: jamController.text,
      ));
    });

    hariController.clear();
    mapelController.clear();
    jamController.clear();
  }

  void hapusJadwal(int index) {
    setState(() {
      listJadwal.removeAt(index);
    });
  }

  void editJadwal(int index) {
    hariController.text = listJadwal[index].hari;
    mapelController.text = listJadwal[index].mataPelajaran;
    jamController.text = listJadwal[index].jam;

    setState(() {
      listJadwal.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Jadwal Pelajaran"),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: hariController,
              decoration: InputDecoration(labelText: "Hari"),
            ),
            TextField(
              controller: mapelController,
              decoration: InputDecoration(labelText: "Mata Pelajaran"),
            ),
            TextField(
              controller: jamController,
              decoration: InputDecoration(labelText: "Jam"),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: tambahJadwal,
              child: Text("Tambah Jadwal"),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: listJadwal.length,
                itemBuilder: (context, index) {
                  final item = listJadwal[index];
                  return Card(
                    child: ListTile(
                      title: Text("${item.hari} - ${item.mataPelajaran}"),
                      subtitle: Text("Jam: ${item.jam}"),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                            icon: Icon(Icons.edit),
                            onPressed: () => editJadwal(index),
                          ),
                          IconButton(
                            icon: Icon(Icons.delete),
                            onPressed: () => hapusJadwal(index),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

class Jadwal {
  String hari;
  String mataPelajaran;
  String jam;

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

---

Penjelasan Fitur CRUD

1. Create (Tambah Data)

Fungsi tambahJadwal() digunakan untuk menambahkan data ke dalam list.

2. Read (Tampilkan Data)

Data ditampilkan menggunakan ListView.builder.

3. Update (Edit Data)

Fungsi editJadwal() mengisi kembali form dengan data lama lalu menghapus data lama dari list.

4. Delete (Hapus Data)

Fungsi hapusJadwal() menghapus item berdasarkan index.

---

Peran setState

setState() digunakan untuk memberi tahu Flutter bahwa ada perubahan data sehingga UI harus diperbarui.

Contoh:

setState(() {
  listJadwal.add(dataBaru);
});

---

Hasil Akhir

Aplikasi akan menampilkan:

• Form input jadwal

• Tombol tambah

• Daftar jadwal

• Tombol edit dan hapus

---

Kesimpulan

Dengan praktikum ini, Anda telah:

• Mengimplementasikan CRUD sederhana

• Menggunakan setState untuk update UI

• Membuat aplikasi Flutter dasar tanpa database

---

Latihan Tambahan

• Tambahkan validasi input

• Gunakan database lokal seperti SQLite (sqflite)

• Tambahkan fitur pencarian jadwal