Praktikum Flutter : 🎯 Aplikasi: Jadwal Pelajaran Sederhana

Berikut contoh kode praktikum Flutter yang sederhana
(Boleh menggunakan code program ini, boleh juga cari referensi lain asal tentang 
Fitur: CRUD sederhana (Tambah, Edit, Hapus) + setState )

👉 Cocok untuk pembelajaran mandiri hari ini 



💻 📱 KODE PRAKTIKUM FLUTTER

🎯 Aplikasi: Jadwal Pelajaran Sederhana

✅ Sudah include:

  • Tambah data

  • Edit data

  • Hapus data

  • ListView

  • Dialog input


📌 LANGKAH AWAL

  1. Buat project baru:

flutter create jadwal_app
  1. Ganti isi file lib/main.dart dengan kode berikut


🧩 KODE LENGKAP

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: Matematika - Senin",
            ),
          ),
          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"),
            ),
          ],
        );
      },
    );
  }

  @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(
                  margin: EdgeInsets.all(8),
                  child: ListTile(
                    title: Text(jadwalList[index]),
                    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: () => hapusData(index),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => tampilDialog(),
        child: Icon(Icons.add),
      ),
    );
  }
}

🎯 TARGET PRAKTIKUM SISWA

Setelah pakai kode ini, siswa diminta:

✅ Level Wajib

  • Jalankan aplikasi

  • Tambah data

  • Edit data

  • Hapus data


🚀 Level Pengembangan (Opsional)

Suruh siswa modifikasi:

  1. Tambah hari & jam

    Senin - Matematika - 08:00
    
  2. Tambah warna berbeda tiap item

  3. Tambah konfirmasi sebelum hapus


🧪 TUGAS PRAKTIKUM 

👉 Kirim ke siswa:

Tugas Praktikum Flutter:

  1. Jalankan aplikasi yang diberikan

  2. Pastikan fitur berikut berjalan:

    • Tambah jadwal

    • Edit jadwal

    • Hapus jadwal

  3. Modifikasi:

    • Tambahkan keterangan hari & jam

    • Percantik tampilan

  4. Screenshot hasil:

    • Tampilan utama

    • Saat tambah data

    • Saat edit

Upload ke Google Drive


💡 CATATAN 

Kode ini sengaja:

  • Tidak terlalu kompleks ✅

  • Mudah dimodifikasi ✅

  • Minim error untuk pemula ✅


🚀 Rencana Level Berikutnya

Saran Pengembangan:

✅ Versi pakai database (Hive / SQLite)
✅ Versi pakai Provider (lebih profesional)
✅ Versi sudah dipisah folder (clean code)

Salam, Redaksi.

Share:

3 komentar:

  1. Dhanis Fathan Gunawan XI RPL 2

    https://dhanisantibootloop.blogspot.com/2026/04/aplikasi-jadwal-pelajaran-sederhana.html

    pak itu saya gaada link zapp.run nya soalnya zapp.run lagi error pak, web nya aneh jadi kalo kode nya error maklumin ya pak

    BalasHapus
    Balasan
    1. Sebagai alternatif zapp.run bisa pakai https://dartpad.dev/

      lain waktu bisa dicoba, terimakasih telah mengerjakan praktikum pembelajaran hari ini.
      semoga bermanfaat.

      Hapus
  2. Zaky Mubarok XI RPL 2

    https://zakyblud.blogspot.com/2026/04/aplikasi-crud-jadwal-perlajaran.html

    BalasHapus

Blogger Tricks

Blogger Themes