Praktikum Flutter : ๐ŸŽฏ Aplikasi: Jadwal Pelajaran Sederhana

Berikut contoh kode praktikum Flutter yang sederhana
(Boleh menggunakan code program ini, boleh juga cari referensi lain asal tentang 
Fitur: CRUD sederhana (Tambah, Edit, Hapus) + setState )

๐Ÿ‘‰ Cocok untuk pembelajaran mandiri hari ini 



๐Ÿ’ป ๐Ÿ“ฑ KODE PRAKTIKUM FLUTTER

๐ŸŽฏ Aplikasi: Jadwal Pelajaran Sederhana

✅ Sudah include:

  • Tambah data

  • Edit data

  • Hapus data

  • ListView

  • Dialog input


๐Ÿ“Œ LANGKAH AWAL

  1. Buat project baru:

flutter create jadwal_app
  1. Ganti isi file lib/main.dart dengan kode berikut


๐Ÿงฉ KODE LENGKAP

import 'package:flutter/material.dart';

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

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

class JadwalPage extends StatefulWidget {
  @override
  _JadwalPageState createState() => _JadwalPageState();
}

class _JadwalPageState extends State<JadwalPage> {
  List<String> jadwalList = [];

  void tambahData(String data) {
    setState(() {
      jadwalList.add(data);
    });
  }

  void editData(int index, String dataBaru) {
    setState(() {
      jadwalList[index] = dataBaru;
    });
  }

  void hapusData(int index) {
    setState(() {
      jadwalList.removeAt(index);
    });
  }

  void tampilDialog({String? dataLama, int? index}) {
    TextEditingController controller =
        TextEditingController(text: dataLama ?? "");

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text(dataLama == null ? "Tambah Jadwal" : "Edit Jadwal"),
          content: TextField(
            controller: controller,
            decoration: InputDecoration(
              hintText: "Contoh: Matematika - Senin",
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Batal"),
            ),
            ElevatedButton(
              onPressed: () {
                if (controller.text.isNotEmpty) {
                  if (dataLama == null) {
                    tambahData(controller.text);
                  } else {
                    editData(index!, controller.text);
                  }
                }
                Navigator.pop(context);
              },
              child: Text("Simpan"),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Jadwal Pelajaran"),
        centerTitle: true,
      ),
      body: jadwalList.isEmpty
          ? Center(child: Text("Belum ada jadwal"))
          : ListView.builder(
              itemCount: jadwalList.length,
              itemBuilder: (context, index) {
                return Card(
                  margin: EdgeInsets.all(8),
                  child: ListTile(
                    title: Text(jadwalList[index]),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          icon: Icon(Icons.edit, color: Colors.blue),
                          onPressed: () => tampilDialog(
                            dataLama: jadwalList[index],
                            index: index,
                          ),
                        ),
                        IconButton(
                          icon: Icon(Icons.delete, color: Colors.red),
                          onPressed: () => hapusData(index),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => tampilDialog(),
        child: Icon(Icons.add),
      ),
    );
  }
}

๐ŸŽฏ TARGET PRAKTIKUM SISWA

Setelah pakai kode ini, siswa diminta:

✅ Level Wajib

  • Jalankan aplikasi

  • Tambah data

  • Edit data

  • Hapus data


๐Ÿš€ Level Pengembangan (Opsional)

Suruh siswa modifikasi:

  1. Tambah hari & jam

    Senin - Matematika - 08:00
    
  2. Tambah warna berbeda tiap item

  3. Tambah konfirmasi sebelum hapus


๐Ÿงช TUGAS PRAKTIKUM 

๐Ÿ‘‰ Kirim ke siswa:

Tugas Praktikum Flutter:

  1. Jalankan aplikasi yang diberikan

  2. Pastikan fitur berikut berjalan:

    • Tambah jadwal

    • Edit jadwal

    • Hapus jadwal

  3. Modifikasi:

    • Tambahkan keterangan hari & jam

    • Percantik tampilan

  4. Screenshot hasil:

    • Tampilan utama

    • Saat tambah data

    • Saat edit

Upload ke Google Drive


๐Ÿ’ก CATATAN 

Kode ini sengaja:

  • Tidak terlalu kompleks ✅

  • Mudah dimodifikasi ✅

  • Minim error untuk pemula ✅


๐Ÿš€ Rencana Level Berikutnya

Saran Pengembangan:

✅ Versi pakai database (Hive / SQLite)
✅ Versi pakai Provider (lebih profesional)
✅ Versi sudah dipisah folder (clean code)

Salam, Redaksi.

Share:

Tidak ada komentar:

Posting Komentar

Blogger Tricks

Blogger Themes