Praktikum Flutter: Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState)

PRAKTIKUM FLUTTER

Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState)

Pendahuluan

Pada praktikum ini kita akan membuat aplikasi jadwal pelajaran sederhana menggunakan Flutter. Aplikasi ini mendukung fitur CRUD (Create, Read, Update, Delete) dengan memanfaatkan setState untuk memperbarui tampilan secara real-time.

Tujuan

• Memahami konsep CRUD di Flutter
• Menggunakan setState untuk update data
• Membuat aplikasi interaktif sederhana

Konsep CRUD

• Create → Menambah data
• Read → Menampilkan data
• Update → Mengubah data
• Delete → Menghapus data

Struktur Data

List<String> jadwal = [];
TextEditingController controller = TextEditingController();
int indexEdit = -1;
  

Fungsi Create & Update

void simpanJadwal() {
  setState(() {
    if (indexEdit == -1) {
      jadwal.add(controller.text); // Create
    } else {
      jadwal[indexEdit] = controller.text; // Update
      indexEdit = -1;
    }
    controller.clear();
  });
}
  

Fungsi Delete

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

Fungsi Edit

void editJadwal(int index) {
  setState(() {
    controller.text = jadwal[index];
    indexEdit = index;
  });
}
  

Tampilan UI

Column(
  children: [
    TextField(controller: controller),
    ElevatedButton(
      onPressed: simpanJadwal,
      child: Text("Simpan"),
    ),
    Expanded(
      child: ListView.builder(
        itemCount: jadwal.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(jadwal[index]),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.edit),
                  onPressed: () => editJadwal(index),
                ),
                IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () => hapusJadwal(index),
                ),
              ],
            ),
          );
        },
      ),
    )
  ],
);
  

Hasil

Aplikasi mampu menambah, menampilkan, mengedit, dan menghapus jadwal pelajaran. Semua perubahan langsung terlihat karena penggunaan setState.

Kesimpulan

• CRUD dapat dibuat sederhana dengan List
• setState efektif untuk aplikasi kecil
• Flutter sangat fleksibel untuk UI dinamis

Pengembangan Lanjutan

• Tambahkan database (SQLite / Hive)
• Gunakan Provider / Riverpod
• Tambahkan jadwal per hari & jam

© 2026 Praktikum Flutter CRUD