Dengan Flutter, Bangun Aplikasi Jadwal Mengajar Guru : Simpan Data secara Lokal

Aplikasi Jadwal Mengajar Guru dengan Flutter: Simpan Data secara Lokal

Berikut penjelasan lengkap aplikasi Jadwal Mengajar Guru yang saya buat menggunakan Flutter dengan fitur penyimpanan lokal menggunakan shared_preferences.

dengan build di situs web builder flutter : https://zapp.run/

Hasil Keluaran Program

(Contoh tampilan: Form input muncul saat tombol "+" diklik, jadwal tersusun dalam card, fitur edit/hapus di setiap item)

Fitur utama aplikasi:

1. Tampilan per hari (Senin-Jumat)

2. CRUD Jadwal: Tambah, Edit, Hapus

3. Penyimpanan lokal: Data tetap ada setelah aplikasi ditutup

4. Input waktu dengan time picker

5. Responsif: Tampilan adaptif untuk semua perangkat

Penjelasan Kode Program Secara Tuntas

1. Struktur Kelas Jadwal

dart

class Jadwal {
  String namaGuru;
  String namaMapel;
  //... variabel lain

  Map<String, dynamic> toMap() => { /*...*/ };  // Konversi ke Map
  static Jadwal fromMap(Map<String, dynamic> map) => Jadwal( /*...*/ ); // Konversi dari Map
}

• Fungsi: Model data untuk menyimpan informasi jadwal

• toMap(): Mengonversi objek Jadwal ke format Map untuk penyimpanan

• fromMap(): Membuat objek Jadwal dari data Map yang diambil dari penyimpanan

xx

2. Penyimpanan Data dengan Shared Preferences

dart

void saveData() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  Map<String, String> data = {};
  jadwalPerHari.forEach((hari, list) {
    data[hari] = jsonEncode(list.map((j) => j.toMap()).toList());
  });
  await prefs.setString('jadwal', jsonEncode(data));
}

void loadData() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String? rawData = prefs.getString('jadwal');
  if (rawData != null) {
    Map<String, dynamic> data = jsonDecode(rawData);
    data.forEach((hari, list) {
      List decoded = jsonDecode(list);
      jadwalPerHari[hari] = decoded.map((e) => Jadwal.fromMap(e)).toList();
    });
    setState(() {});
  }
}

• Mekanisme:

  1. Data diubah menjadi Map → JSON string

  2. Disimpan ke memori perangkat dengan kunci 'jadwal'

  3. Saat aplikasi dibuka, data dimuat dari penyimpanan dan dikonversi kembali ke objek Dart

3. UI Dinamis dengan State Management

a. Toggle Form Input

dart

bool showForm = false;

IconButton(
  icon: Icon(showForm ? Icons.close : Icons.add),
  onPressed: () {
    setState(() => showForm = !showForm);
  },
)

• Tombol "+" berubah menjadi "X" saat form aktif

• State showForm mengontrol tampilan form

b. PageView untuk Navigasi Hari

dart

PageController _pageController = PageController();

PageView.builder(
  controller: _pageController,
  onPageChanged: (index) => setState(() => currentIndex = index),
  //...
)

• Menggunakan PageView untuk swipe antar hari

• PageController sinkronisasi dengan tombol hari

4. Form Input dengan Validasi

dart

Future<void> pickTime(TextEditingController controller) async {
  TimeOfDay? picked = await showTimePicker(...);
  controller.text = picked.format(context);
}

• Time Picker: Memunculkan dialog pemilihan waktu native

• Form Key: Validasi form sebelum menyimpan data

5. Operasi CRUD

dart

// Tambah Data
jadwalPerHari[hari]?.add(newJadwal);

// Edit Data
jadwalPerHari[editingHari]![editingIndex!] = newJadwal;

// Hapus Data
jadwalPerHari[hari]!.removeAt(i);

• Edit Mode: Saat tombol edit diklik, form diisi data yang dipilih

• Hapus: Menghapus item berdasarkan index di hari aktif

Cara Penggunaan Aplikasi

1. Tambah Jadwal:

   • Klik tombol "+"

   • Isi form → "Tambah"

2. Edit Jadwal:

   • Klik ikon pensil pada card jadwal

   • Ubah data → "Simpan Edit"

3. Hapus Jadwal:

   • Klik ikon tempat sampah pada card

4. Ganti Hari:

   • Klik tombol hari di atas atau swipe kiri/kanan

Teknologi yang Digunakan

• shared_preferences: Penyimpanan data lokal

• PageView: Navigasi swipe antar halaman

• TimePicker: Input waktu native

• JSON Serialization: Konversi data ke format simpan

Aplikasi ini cocok digunakan oleh guru atau admin sekolah untuk mengelola jadwal mengajar secara praktis dan offline. Data tersimpan aman di perangkat meski aplikasi ditutup.

Link Demo Program yang sudah dibuild:

https://zh2i067ph2j0.zapp.page/#/