Jadwal Mata Pelajaran

Membuat Aplikasi Jadwal Pelajaran dengan Flutter Di era digital saat ini, mengatur jadwal pelajaran tidak harus lagi menggunakan buku tulis. Dengan bantuan teknologi, kita bisa membuat aplikasi sederhana yang membantu mengelola jadwal dengan lebih praktis dan menarik. Pada artikel ini, kita akan belajar membuat aplikasi **jadwal pelajaran menggunakan Flutter** yang memiliki fitur lengkap seperti tambah data, edit, hapus, warna berbeda, hingga konfirmasi sebelum menghapus. --- 🎯 Tujuan Aplikasi Aplikasi ini dirancang untuk: * Menyimpan jadwal pelajaran harian * Menampilkan data dengan tampilan menarik * Memudahkan pengguna dalam mengelola jadwal Contoh jadwal: > Senin - Matematika - 08:00-09:45 --- ✨ Fitur Utama Aplikasi yang kita buat memiliki beberapa fitur penting, yaitu: ✅ Tambah jadwal ✅ Edit jadwal ✅ Hapus jadwal dengan konfirmasi ✅ Warna berbeda untuk setiap item ✅ Input hari, pelajaran, dan jam ✅ Tampilan sederhana dan mudah digunakan --- 🧱 Struktur Aplikasi Aplikasi ini terdiri dari: * **Model data** untuk menyimpan jadwal * **Halaman utama (StatefulWidget)** untuk menampilkan daftar * **Dialog input** untuk tambah/edit data * **Konfirmasi dialog** saat menghapus --- 💻 Cara Kerja Singkat 1. Pengguna menekan tombol **+** untuk menambah jadwal 2. Muncul form untuk mengisi: * Hari * Mata pelajaran * Jam 3. Pengguna bisa memilih warna untuk setiap jadwal 4. Data ditampilkan dalam bentuk list 5. Tombol edit untuk mengubah data 6. Tombol hapus akan memunculkan konfirmasi terlebih dahulu --- 🎨 Tampilan Aplikasi Setiap jadwal akan ditampilkan dalam bentuk card dengan warna berbeda, sehingga lebih menarik dan mudah dibedakan. Contoh tampilan: * Senin - Matematika (biru) * Selasa - Bahasa Indonesia (merah) * Rabu - IPA (hijau) --- 🚀 Kelebihan Aplikasi * Mudah digunakan (user friendly) * Tampilan menarik dengan warna * Tidak membutuhkan database (sederhana) * Cocok untuk pemula belajar Flutter --- 🔧 Pengembangan Lanjutan Jika ingin meningkatkan aplikasi ini, kamu bisa menambahkan: * Dropdown pilihan hari otomatis * Time picker untuk memilih jam * Penyimpanan data permanen (SQLite / SharedPreferences) * Notifikasi pengingat pelajaran * Tampilan jadwal per hari --- import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class Schedule { String day; String subject; String time; Color color; Schedule({ required this.day, required this.subject, required this.time, required this.color, }); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Jadwal Pelajaran', theme: ThemeData(primarySwatch: Colors.blue), home: SchedulePage(), ); } } class SchedulePage extends StatefulWidget { @override _SchedulePageState createState() => _SchedulePageState(); } class _SchedulePageState extends State { List schedules = []; void _addOrEditSchedule({Schedule? schedule, int? index}) { TextEditingController dayController = TextEditingController(text: schedule?.day ?? ''); TextEditingController subjectController = TextEditingController(text: schedule?.subject ?? ''); TextEditingController timeController = TextEditingController(text: schedule?.time ?? ''); Color selectedColor = schedule?.color ?? Colors.blue; showDialog( context: context, builder: (context) { return AlertDialog( title: Text(schedule == null ? 'Tambah Jadwal' : 'Edit Jadwal'), content: SingleChildScrollView( child: Column( children: [ TextField( controller: dayController, decoration: InputDecoration(labelText: 'Hari'), ), TextField( controller: subjectController, decoration: InputDecoration(labelText: 'Mata Pelajaran'), ), TextField( controller: timeController, decoration: InputDecoration(labelText: 'Jam (08:00)'), ), SizedBox(height: 10), DropdownButton( value: selectedColor, items: [ Colors.blue, Colors.red, Colors.green, Colors.orange, Colors.purple, ] .map((color) => DropdownMenuItem( value: color, child: Container( width: 50, height: 20, color: color, ), )) .toList(), onChanged: (color) { setState(() { selectedColor = color!; }); }, ), ], ), ), actions: [ TextButton( onPressed: () { Navigator.pop(context); }, child: Text('Batal'), ), ElevatedButton( onPressed: () { if (dayController.text.isNotEmpty && subjectController.text.isNotEmpty && timeController.text.isNotEmpty) { setState(() { if (schedule == null) { schedules.add(Schedule( day: dayController.text, subject: subjectController.text, time: timeController.text, color: selectedColor, )); } else { schedules[index!] = Schedule( day: dayController.text, subject: subjectController.text, time: timeController.text, color: selectedColor, ); } }); Navigator.pop(context); } }, child: Text('Simpan'), ), ], ); }, ); } void _deleteSchedule(int index) { 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'), ), ElevatedButton( onPressed: () { setState(() { schedules.removeAt(index); }); Navigator.pop(context); }, child: Text('Hapus'), ), ], ); }, ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Jadwal Pelajaran'), ), body: schedules.isEmpty ? Center(child: Text('Belum ada jadwal')) : ListView.builder( itemCount: schedules.length, itemBuilder: (context, index) { final item = schedules[index]; return Card( color: item.color.withOpacity(0.2), child: ListTile( title: Text('${item.day} - ${item.subject}'), subtitle: Text(item.time), trailing: Row( mainAxisSize: MainAxisSize.min, children: [ IconButton( icon: Icon(Icons.edit), onPressed: () => _addOrEditSchedule(schedule: item, index: index), ), IconButton( icon: Icon(Icons.delete), onPressed: () => _deleteSchedule(index), ), ], ), ), ); }, ), floatingActionButton: FloatingActionButton( onPressed: () => _addOrEditSchedule(), child: Icon(Icons.add), ), ); } }