LKPD PRAKTIKUM FLUTTER

---

📱 Praktik Flutter: Aplikasi Jadwal Pelajaran (CRUD + setState)

🎯 Tujuan

Pada praktik ini, kita akan membuat aplikasi sederhana untuk mengelola jadwal pelajaran. Fitur yang akan dibuat:

• Menambahkan jadwal (Create)

• Menampilkan daftar jadwal (Read)

• Mengedit jadwal (Update)

• Menghapus jadwal (Delete)

State akan dikelola menggunakan setState tanpa state management tambahan.

---

🧱 Struktur Data

Kita mulai dengan membuat model sederhana:

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

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

---

🏠 Halaman Utama (Home Page)

Berikut implementasi utama dengan StatefulWidget:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Jadwal> listJadwal = [];

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

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

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

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

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

    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title: Text("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: () {
              setState(() {
                listJadwal[index] = Jadwal(
                  mataPelajaran: mapelController.text,
                  hari: hariController.text,
                  jam: jamController.text,
                );
              });
              Navigator.pop(context);
            },
            child: Text("Simpan"),
          )
        ],
      ),
    );
  }

  void tampilFormTambah() {
    showDialog(
      context: context,
      builder: (_) => 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();
              Navigator.pop(context);
            },
            child: Text("Tambah"),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Jadwal Pelajaran"),
      ),
      body: ListView.builder(
        itemCount: listJadwal.length,
        itemBuilder: (context, index) {
          final item = listJadwal[index];
          return ListTile(
            title: Text(item.mataPelajaran),
            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: () => hapusJadwal(index),
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: tampilFormTambah,
        child: Icon(Icons.add),
      ),
    );
  }
}

---

🔄 Penjelasan Konsep

1. setState

setState() digunakan untuk memberi tahu Flutter bahwa state berubah sehingga UI akan di-render ulang.

Contoh:

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

---

2. CRUD

Operasi	Implementasi
Create	tambahJadwal()
Read	ListView.builder
Update	editJadwal()
Delete	hapusJadwal()

---

3. Dialog Form

Digunakan AlertDialog untuk input data agar UI tetap sederhana.

---

🚀 Pengembangan Lanjutan

Jika ingin meningkatkan aplikasi ini:

• Gunakan database lokal seperti sqflite

• Tambahkan validasi input

• Gunakan state management seperti Provider / Riverpod

• Tambahkan fitur pencarian jadwal

---

📌 Kesimpulan

Dengan menggunakan setState, kita bisa membuat aplikasi CRUD sederhana tanpa library tambahan. Meskipun cocok untuk aplikasi kecil, pendekatan ini kurang optimal untuk aplikasi besar.

---