Flutter Jadwal Pelajaran Bagus

Bikin Aplikasi Jadwal Pelajaran Modern dengan Flutter

Konsep Glossy Glassmorphism & CRUD Sederhana

Halo sobat dev! Hari ini kita bakal bahas cara bikin aplikasi Jadwal Pelajaran yang nggak cuma fungsional, tapi juga punya tampilan yang eye-candy. Kita bakal pake Flutter dengan tema White Glossy Glass.

Fitur Utama:

✨ Modern UI
Efek blur transparan (Glassmorphism).

📝 CRUD Ready
Tambah, edit, dan hapus jadwal secara real-time.

⚡ DartPad Friendly
Satu file kode yang langsung jalan.

Cara Penggunaan: Copy kode di bawah, buka DartPad, lalu paste dan jalankan!

main.dart

import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(const GlassScheduleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: 'sans-serif'),
      home: const SchedulePage(),
    );
  }
}

class Schedule {
  String id;
  String subject;
  String time;

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

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

  @override
  State<SchedulePage> createState() => _SchedulePageState();
}

class _SchedulePageState extends State<SchedulePage> {
  final List<Schedule> _schedules = [
    Schedule(id: '1', subject: 'Matematika', time: '08:00 - 09:30'),
    Schedule(id: '2', subject: 'Desain Grafis', time: '10:00 - 11:30'),
  ];

  final TextEditingController _subjectController = TextEditingController();
  final TextEditingController _timeController = TextEditingController();

  void _showForm(Schedule? schedule) {
    if (schedule != null) {
      _subjectController.text = schedule.subject;
      _timeController.text = schedule.time;
    } else {
      _subjectController.clear();
      _timeController.clear();
    }

    showDialog(
      context: context,
      builder: (context) => BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
        child: AlertDialog(
          backgroundColor: Colors.white.withOpacity(0.8),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          title: Text(schedule == null ? 'Tambah Jadwal' : 'Edit Jadwal', 
              style: const TextStyle(color: Colors.black87, fontWeight: FontWeight.bold)),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildTextField(_subjectController, 'Mata Pelajaran'),
              const SizedBox(height: 15),
              _buildTextField(_timeController, 'Jam (cth: 08:00)'),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('Batal', style: TextStyle(color: Colors.grey)),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.white,
                foregroundColor: Colors.blueAccent,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
              ),
              onPressed: () {
                setState(() {
                  if (schedule == null) {
                    _schedules.add(Schedule(
                      id: DateTime.now().toString(),
                      subject: _subjectController.text,
                      time: _timeController.text,
                    ));
                  } else {
                    schedule.subject = _subjectController.text;
                    schedule.time = _timeController.text;
                  }
                });
                Navigator.pop(context);
              },
              child: const Text('Simpan'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTextField(TextEditingController controller, String label) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(
        labelText: label,
        filled: true,
        fillColor: Colors.white.withOpacity(0.5),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: BorderSide.none,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: const Text('Jadwal Pelajaran', style: TextStyle(color: Colors.black87, fontWeight: FontWeight.w800)),
        centerTitle: true,
        backgroundColor: Colors.white.withOpacity(0.4),
        elevation: 0,
        flexibleSpace: ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
            child: Container(color: Colors.transparent),
          ),
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFFF0F2F5), Color(0xFFFFFFFF)],
          ),
        ),
        child: ListView.builder(
          padding: const EdgeInsets.only(top: 120, left: 20, right: 20),
          itemCount: _schedules.length,
          itemBuilder: (context, index) {
            final item = _schedules[index];
            return Padding(
              padding: const EdgeInsets.only(bottom: 15),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
                  child: Container(
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.6),
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(color: Colors.white.withOpacity(0.5)),
                    ),
                    child: Row(
                      children: [
                        Container(
                          width: 50, height: 50,
                          decoration: BoxDecoration(
                            color: Colors.blueAccent.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: const Icon(Icons.book_rounded, color: Colors.blueAccent),
                        ),
                        const SizedBox(width: 15),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(item.subject, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                              Text(item.time, style: TextStyle(color: Colors.grey[600])),
                            ],
                          ),
                        ),
                        IconButton(icon: const Icon(Icons.edit_note, color: Colors.blueGrey), onPressed: () => _showForm(item)),
                        IconButton(
                          icon: const Icon(Icons.delete_outline, color: Colors.redAccent),
                          onPressed: () => setState(() => _schedules.removeAt(index)),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () => _showForm(null),
        backgroundColor: Colors.white.withOpacity(0.9),
        elevation: 4,
        label: const Text('Tambah', style: TextStyle(color: Colors.black87, fontWeight: FontWeight.bold)),
        icon: const Icon(Icons.add, color: Colors.blueAccent),
      ),
    );
  }
}

Dengan kode di atas, lo udah dapet aplikasi jadwal pelajaran yang punya fitur lengkap: Tambah, Lihat, Edit, dan Hapus. Semuanya dibalut dengan desain minimalis yang pastinya bikin betah buat dikembangin lagi.

Dibuat dengan ❤️ untuk Flutter Developer Indonesia.