Aplikasi Jadwal Pelajaran ๐Ÿ’ฏ

๐Ÿ“ฑ Membuat Aplikasi Jadwal Pelajaran dengan Flutter (CRUD)

Pada artikel ini, kita akan belajar membuat aplikasi jadwal pelajaran menggunakan Flutter. Aplikasi ini memiliki fitur lengkap seperti Tambah, Edit, dan Hapus (CRUD) serta dilengkapi dengan input hari dan jam.


๐Ÿš€ Fitur Aplikasi

  • Menambahkan jadwal pelajaran
  • Mengedit jadwal
  • Menghapus jadwal
  • Memilih hari (Senin - Sabtu)
  • Input jam pelajaran

๐Ÿ“ฆ Struktur Data

Kita akan menggunakan class sederhana untuk menyimpan data jadwal:


class Schedule {
  String subject;
  String day;
  String time;

  Schedule({required this.subject, required this.day, required this.time});
}

๐Ÿ’ป Kode Lengkap Flutter

Berikut adalah kode lengkap untuk membuat aplikasi jadwal pelajaran:


import 'package:flutter/material.dart';

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

class Schedule {
  String subject;
  String day;
  String time;

  Schedule({required this.subject, required this.day, required this.time});
}

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

class SchedulePage extends StatefulWidget {
  @override
  _SchedulePageState createState() => _SchedulePageState();
}

class _SchedulePageState extends State<SchedulePage> {
  List<Schedule> schedules = [];

  void addSchedule(Schedule schedule) {
    setState(() {
      schedules.add(schedule);
    });
  }

  void editSchedule(int index, Schedule schedule) {
    setState(() {
      schedules[index] = schedule;
    });
  }

  void deleteSchedule(int index) {
    setState(() {
      schedules.removeAt(index);
    });
  }

  void showForm({Schedule? schedule, int? index}) {
    final subjectController =
        TextEditingController(text: schedule?.subject ?? '');
    final timeController =
        TextEditingController(text: schedule?.time ?? '');
    String selectedDay = schedule?.day ?? 'Senin';

    showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          title: Text(schedule == null ? 'Tambah Jadwal' : 'Edit Jadwal'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: subjectController,
                decoration: InputDecoration(labelText: 'Mata Pelajaran'),
              ),
              TextField(
                controller: timeController,
                decoration: InputDecoration(labelText: 'Jam (08:00 - 09:00)'),
              ),
              DropdownButton<String>(
                value: selectedDay,
                isExpanded: true,
                items: [
                  'Senin',
                  'Selasa',
                  'Rabu',
                  'Kamis',
                  'Jumat',
                  'Sabtu'
                ]
                    .map((day) => DropdownMenuItem(
                          value: day,
                          child: Text(day),
                        ))
                    .toList(),
                onChanged: (value) {
                  selectedDay = value!;
                },
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Batal'),
            ),
            ElevatedButton(
              onPressed: () {
                final newSchedule = Schedule(
                  subject: subjectController.text,
                  day: selectedDay,
                  time: timeController.text,
                );

                if (schedule == null) {
                  addSchedule(newSchedule);
                } else {
                  editSchedule(index!, newSchedule);
                }

                Navigator.pop(context);
              },
              child: Text('Simpan'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jadwal Pelajaran'),
      ),
      body: ListView.builder(
        itemCount: schedules.length,
        itemBuilder: (context, index) {
          final s = schedules[index];
          return Card(
            margin: EdgeInsets.all(8),
            child: ListTile(
              title: Text(s.subject),
              subtitle: Text('\${s.day} | \${s.time}'),
              trailing: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  IconButton(
                    icon: Icon(Icons.edit),
                    onPressed: () => showForm(schedule: s, index: index),
                  ),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => deleteSchedule(index),
                  ),
                ],
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => showForm(),
        child: Icon(Icons.add),
      ),
    );
  }
}

⚡ Cara Menjalankan

  1. Buat project Flutter baru: flutter create jadwal_app
  2. Ganti file main.dart dengan kode di atas
  3. Jalankan aplikasi dengan flutter run

๐Ÿ”ฅ Penutup

Dengan aplikasi ini, kamu sudah berhasil membuat sistem CRUD sederhana di Flutter. Selanjutnya, kamu bisa mengembangkan aplikasi ini dengan menambahkan database seperti SQLite atau Firebase agar data bisa tersimpan permanen.

Semoga bermanfaat dan selamat ngoding! ๐Ÿš€

Komentar

Postingan populer dari blog ini

๐Ÿš€ Belajar Flutter Sambil Ngabuburit: Bikin Widget Gampang Banget!

BIKIN TAMPILAN IG SENDIRI PAKE FIGMA YANG KECE DAN KEREN