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
- Buat project Flutter baru:
flutter create jadwal_app - Ganti file
main.dartdengan kode di atas - 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
Posting Komentar