🧑‍💻 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:

Membuat project baru:
```
flutter create jadwal_app
```
Mengganti file main.dart dengan kode yang telah diberikan
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:

Jalankan aplikasi yang diberikan
Pastikan fitur berikut berjalan:
- Tambah jadwal
- Edit jadwal
- Hapus jadwal
Lakukan modifikasi:
- Tambahkan hari & jam
- Percantik tampilan
Screenshot hasil
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)

PEMROGRAMAN WEB DINAMIS

SIMULASI DAN KOMUNIKASI DIGITAL

SISTEM KOMPUTER

DASAR DESAIN GRAPIS

BASIS DATA