Aplikasi Jadwal Pelajaran Flutter

Implementasi Aplikasi Jadwal Pelajaran Flutter

Studi kasus pembangunan aplikasi jadwal pelajaran berbasis Flutter dengan fitur CRUD, validasi input, serta peningkatan kualitas UI mendekati standar production.

RINGKASAN FITUR

• Manajemen data jadwal — Tambah, Edit, Hapus
• Input terstruktur: hari, mata pelajaran, jam, catatan
• Time picker untuk akurasi input waktu
• Konfirmasi dialog sebelum penghapusan data
• Card UI dengan indikator warna per hari

1. Arsitektur Data

Pendekatan awal menggunakan List<String> tidak scalable. Diganti dengan model object JadwalItem agar setiap atribut terpisah secara eksplisit.

jadwal_item.dart

class JadwalItem {
  String hari;
  String mataPelajaran;
  String jam;
  String catatan;

  JadwalItem({
    required this.hari,
    required this.mataPelajaran,
    required this.jam,
    this.catatan = '',
  });
}

✅ Keuntungan pendekatan ini:

• Struktur data jelas dan mudah dikembangkan
• Mudah diintegrasikan dengan database atau API
• Menghindari parsing string manual yang rawan error

2. Operasi CRUD

Operasi CRUD di-handle langsung oleh state widget menggunakan setState().

crud_operations.dart

void tambahData(JadwalItem data) {
  setState(() => jadwalList.add(data));
}

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

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

⚠️ Catatan: Pendekatan ini cocok untuk aplikasi skala kecil. Untuk produksi, gunakan state management seperti Provider atau Riverpod.

3. Form Input (Dialog)

Input data dilakukan melalui dialog dengan komponen berikut:

Dropdown → Hari TextField → Mapel Time Picker → Jam TextField → Catatan

time_picker.dart

Future<void> pickTime(TextEditingController ctrl) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  if (picked != null) {
    ctrl.text = picked.format(context);
  }
}

Time picker meningkatkan akurasi input dan menghindari kesalahan format waktu secara manual.

4. Konfirmasi Penghapusan

Setiap aksi hapus disertai dialog konfirmasi untuk mencegah kehilangan data tidak sengaja.

delete_dialog.dart

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

5. Desain Antarmuka

UI dirancang dengan prinsip kesederhanaan namun tetap informatif:

🃏

Card Layout

Setiap item ditampilkan sebagai card terstruktur

🎨

Warna per Hari

Indikator warna berbeda untuk setiap hari

🎯

Visual Icon

Icon sebagai penanda identitas visual

📏

Konsisten

Spacing dan typography yang seragam

6. Full Source Code

Kode lengkap dapat di-copy langsung untuk dijalankan di project Flutter kamu.

main.dart

import 'package:flutter/material.dart';

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

class JadwalItem {
  String hari;
  String mataPelajaran;
  String jam;
  String catatan;

  JadwalItem({
    required this.hari,
    required this.mataPelajaran,
    required this.jam,
    this.catatan = '',
  });
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Jadwal Pelajaran',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const JadwalPage(),
    );
  }
}

class JadwalPage extends StatefulWidget {
  const JadwalPage({super.key});

  @override
  State<JadwalPage> createState() => _JadwalPageState();
}

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

  void tambahData(JadwalItem data) {
    setState(() => jadwalList.add(data));
  }

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

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

  // ... lanjutan kode ada di project lengkap
}

📌 Kesimpulan & Pengembangan Lanjut

Implementasi ini menunjukkan pola dasar pembangunan aplikasi Flutter berbasis CRUD dengan struktur data yang baik dan UI yang cukup matang untuk level pembelajaran.

🗄️ SQLite / Supabase 📊 Riverpod / Bloc 🔔 Notifikasi Jadwal ☁️ Sinkronisasi Cloud