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

📅 14 April 2026
✍️ Oleh: Guru RPL

---

🎯 Tujuan Pembelajaran

Pada praktikum hari ini, siswa diharapkan mampu:

• Memahami konsep dasar CRUD (Create, Read, Update, Delete)
• Menggunakan setState() untuk memperbarui tampilan
• Membuat aplikasi sederhana menggunakan Flutter
• Melatih logika dan kreativitas dalam pengembangan aplikasi mobile

---

💻 Deskripsi Praktikum

Siswa akan membuat aplikasi Jadwal Pelajaran Sederhana dengan fitur:

• ✅ Tambah data
• ✅ Edit data
• ✅ Hapus data
• ✅ Menampilkan data menggunakan ListView
• ✅ Input menggunakan dialog (AlertDialog)

Kode program telah disediakan sebagai dasar pembelajaran, dan siswa diperbolehkan untuk memodifikasi atau mencari referensi tambahan.

---

⏰ Alur Kegiatan Pembelajaran

🟢 1. Pembuka (08.45 – 09.00)

Guru memberikan arahan terkait:

• Tujuan praktikum
• Target yang harus dicapai
• Gambaran hasil akhir aplikasi

---

🟡 2. Setup & Menjalankan Project (09.00 – 09.30)

Langkah-langkah:

1. Membuat project baru:

   flutter create jadwal_app
   

2. Mengganti file main.dart dengan kode yang telah diberikan

3. Menjalankan aplikasi:

   flutter run
   

🎯 Target:
Aplikasi berhasil dijalankan dan menampilkan halaman awal.

---

🔵 3. Eksplorasi Fitur CRUD (09.45 – 11.00)

Siswa mencoba seluruh fitur:

• Menambah data jadwal
• Mengedit data
• Menghapus data

🎯 Tujuan:
Memahami alur perubahan data dan penggunaan setState().

---

🟣 4. Pemahaman Kode (11.00 – 12.00)

Fokus pada bagian penting:

• Fungsi tambahData()
• Fungsi editData()
• Fungsi hapusData()
• Penggunaan ListView.builder
• Penggunaan AlertDialog

---

🔴 5. Modifikasi Aplikasi (12.30 – 14.00)

Siswa diminta mengembangkan aplikasi dengan pilihan berikut:

Level Dasar:

• Menambahkan format hari dan jam
  Contoh: Senin - Matematika - 08:00

Level Menengah:

• Menambahkan warna berbeda pada setiap item

Level Lanjutan (Opsional):

• Menambahkan konfirmasi sebelum menghapus data

---

📸 6. Pengumpulan Hasil (14.00 – 14.45)

Siswa mengumpulkan:

• Screenshot tampilan utama
• Screenshot saat tambah data
• Screenshot saat edit data

Upload ke Google Drive yang telah disediakan.

---

🟢 7. Penutup & Refleksi (14.45 – 15.00)

Siswa melakukan refleksi:

• Apa fungsi setState()?
• Apa kendala yang dialami?
• Apakah semua fitur CRUD berhasil?

---

🧪 Tugas Praktikum

Instruksi untuk siswa:

1. Jalankan aplikasi yang diberikan
2. Pastikan fitur berikut berjalan:
   • Tambah jadwal
   • Edit jadwal
   • Hapus jadwal
3. Lakukan modifikasi:
   • Tambahkan hari & jam
   • Percantik tampilan
4. Screenshot hasil
5. Upload ke Google Drive

---

💡 Catatan

Kode yang digunakan pada praktikum ini:

• Sederhana dan mudah dipahami
• Cocok untuk pemula
• Mudah dikembangkan ke tahap lanjutan

---

🚀 Rencana Pengembangan Selanjutnya

Sebagai tindak lanjut, siswa akan belajar:

• Menggunakan database lokal (SQLite / Hive)
• State management menggunakan Provider
• Struktur project yang lebih rapi (clean architecture)

---

📌 Penutup

Melalui praktikum ini, siswa diharapkan tidak hanya memahami konsep dasar Flutter, tetapi juga mampu mengembangkan aplikasi sederhana secara mandiri sebagai bekal menuju pengembangan aplikasi yang lebih kompleks.

---

💻 Kode Program Lengkap Flutter

🎯 Aplikasi: Jadwal Pelajaran Sederhana (CRUD)

Berikut kode full yang bisa langsung digunakan:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JadwalPage(),
    );
  }
}

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

class _JadwalPageState extends State<JadwalPage> {
  List<String> jadwalList = [];

  void tambahData(String data) {
    setState(() {
      jadwalList.add(data);
    });
  }

  void editData(int index, String dataBaru) {
    setState(() {
      jadwalList[index] = dataBaru;
    });
  }

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

  void tampilDialog({String? dataLama, int? index}) {
    TextEditingController controller =
        TextEditingController(text: dataLama ?? "");

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text(dataLama == null ? "Tambah Jadwal" : "Edit Jadwal"),
          content: TextField(
            controller: controller,
            decoration: InputDecoration(
              hintText: "Contoh: Senin - Matematika - 08:00",
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Batal"),
            ),
            ElevatedButton(
              onPressed: () {
                if (controller.text.isNotEmpty) {
                  if (dataLama == null) {
                    tambahData(controller.text);
                  } else {
                    editData(index!, controller.text);
                  }
                }
                Navigator.pop(context);
              },
              child: Text("Simpan"),
            ),
          ],
        );
      },
    );
  }

  void konfirmasiHapus(int index) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text("Konfirmasi"),
          content: Text("Yakin ingin menghapus data ini?"),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Batal"),
            ),
            ElevatedButton(
              onPressed: () {
                hapusData(index);
                Navigator.pop(context);
              },
              child: Text("Hapus"),
            ),
          ],
        );
      },
    );
  }

  Color getWarnaItem(String data) {
    if (data.toLowerCase().contains("senin")) return Colors.blue.shade100;
    if (data.toLowerCase().contains("selasa")) return Colors.green.shade100;
    if (data.toLowerCase().contains("rabu")) return Colors.orange.shade100;
    if (data.toLowerCase().contains("kamis")) return Colors.purple.shade100;
    if (data.toLowerCase().contains("jumat")) return Colors.red.shade100;
    return Colors.grey.shade200;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Jadwal Pelajaran"),
        centerTitle: true,
      ),
      body: jadwalList.isEmpty
          ? Center(child: Text("Belum ada jadwal"))
          : ListView.builder(
              itemCount: jadwalList.length,
              itemBuilder: (context, index) {
                return Card(
                  color: getWarnaItem(jadwalList[index]),
                  margin: EdgeInsets.all(8),
                  child: ListTile(
                    title: Text(
                      jadwalList[index],
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          icon: Icon(Icons.edit, color: Colors.blue),
                          onPressed: () => tampilDialog(
                            dataLama: jadwalList[index],
                            index: index,
                          ),
                        ),
                        IconButton(
                          icon: Icon(Icons.delete, color: Colors.red),
                          onPressed: () => konfirmasiHapus(index),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => tampilDialog(),
        child: Icon(Icons.add),
      ),
    );
  }
}

---

🌐 Alternatif Praktikum Tanpa Install (Online)

Siswa bisa langsung coding tanpa install Flutter 👇

🟢 Rekomendasi:

• 🌐 https://zapp.run
• 🌐 https://dartpad.dev (untuk basic Flutter UI)
• 🌐 https://flutlab.io
• 🌐 https://replit.com (support Flutter terbatas)