🗺️ ROAD MAP FLUTTER KELAS XI — 1 TAHUN

Untuk kelas XI SMK/PPLG-RPL, saya berencana pembelajaran Flutter tidak terlalu berorientasi pada “menghafal widget”, tetapi dibuat project-based: setiap minggu siswa menghasilkan aplikasi kecil yang bisa langsung dijalankan.

Target satu tahun: dari belum menguasai Flutter → mampu membuat aplikasi CRUD sederhana → memakai API → menyimpan data lokal → membuat 1 project akhir yang layak dipresentasikan.

🗺️ ROAD MAP FLUTTER KELAS XI — 1 TAHUN

Saya buat dalam 36 minggu efektif, dengan asumsi 1 pertemuan utama per minggu. Setiap minggu ada produk/aplikasi sederhana.

FASE 1 — FUNDAMENTAL DART & FLUTTER

Minggu 1–6

Minggu	Materi	Aplikasi/Produk
1	Pengenalan Flutter, Dart, struktur project	👋 Hello Flutter App
2	main(), MaterialApp, Scaffold, Text, Icon	🪪 Kartu Profil Siswa
3	Container, Row, Column, Padding, SizedBox	🏠 Dashboard Sekolah
4	Image, Card, ListView	🍔 Daftar Menu Kantin
5	Button, TextField, input pengguna	📝 Form Data Siswa
6	State dasar, setState()	🔢 Counter App

Target akhir fase:

Siswa sudah bisa:

• membuat project Flutter;
• memahami main.dart;
• menggunakan widget dasar;
• membuat layout;
• menerima input;
• mengubah tampilan berdasarkan state.

---

FASE 2 — UI/UX & NAVIGASI

Minggu 7–12

Minggu	Materi	Aplikasi
7	Tema, warna, typography, ButtonStyle	🎨 Aplikasi Profil Modern
8	Form & validasi input	📋 Form Pendaftaran Siswa
9	Navigator, route	📱 Multi Page School App
10	Passing data antar halaman	👤 Data Profil Siswa
11	BottomNavigationBar	🏫 School Information App
12	Mini Project	📚 Aplikasi Perpustakaan Mini

Project minggu 12

Contoh:

SMKN 1 Banjar Library

Halaman:

• Beranda
• Daftar Buku
• Detail Buku
• Profil

Siswa mulai belajar bahwa aplikasi bukan sekadar kumpulan widget, tetapi memiliki alur pengguna.

---

FASE 3 — STATE MANAGEMENT DASAR

Minggu 13–18

Di sini siswa mulai membuat aplikasi yang benar-benar "hidup".

Minggu	Materi	Aplikasi
13	State & setState() lebih dalam	🔢 Counter Plus/Minus/Reset
14	Conditional UI	🚦 Status Kehadiran
15	List & manipulasi data	🛒 Shopping List
16	Add/Delete data	✅ To Do List
17	Edit data	📋 Task Manager
18	Mini Project	🧹 Aplikasi Piket Kelas

Project utama:

Aplikasi Piket Kelas

Fitur:

Dashboard
   ↓
Daftar Petugas
   ↓
Tambah Petugas
   ↓
Checklist Tugas
   ↓
Status Selesai/Belum
   ↓
Hapus/Edit

Ini sangat cocok untuk siswa SMK karena dekat dengan kehidupan sekolah.

---

FASE 4 — FORM + CRUD

Minggu 19–24

Ini salah satu fase terpenting.

Siswa mulai memahami konsep:

Create → Read → Update → Delete

Minggu	Materi	Aplikasi
19	Konsep CRUD	👥 Data Siswa
20	Create & Read	📚 Data Buku
21	Update	📦 Data Barang
22	Delete + confirmation	🛍️ Data Produk
23	Search & filtering	🔎 Pencarian Produk
24	Mini Project CRUD	🏪 Aplikasi Inventaris Sekolah

Project minggu 24

Inventaris Barang Sekolah

Contoh:

Laptop
Proyektor
Kursi
Meja
Kamera
Printer

Fitur:

• tambah barang;
• lihat barang;
• edit barang;
• hapus barang;
• pencarian;
• kategori;
• kondisi barang.

---

FASE 5 — PENYIMPANAN DATA LOKAL

Minggu 25–28

Sekarang siswa belajar bahwa data aplikasi tidak boleh hilang ketika aplikasi ditutup.

Minggu	Materi	Aplikasi
25	Konsep local storage	💾 Save Name App
26	SharedPreferences	⚙️ Settings App
27	Penyimpanan list/data	📝 Persistent To Do List
28	Mini Project	💰 Catatan Keuangan Siswa

Project:

Catatan Keuangan Siswa

Contoh transaksi:

Uang Masuk
+ Rp20.000

Uang Keluar
- Rp5.000
- Rp3.000

Saldo
Rp12.000

Siswa belajar konsep data yang persistent.

---

FASE 6 — API & INTERNET

Minggu 29–33

Ini fase yang sangat penting sebelum naik ke level pengembangan aplikasi modern.

Minggu	Materi	Aplikasi
29	Apa itu API & JSON	🌐 API Explorer
30	HTTP GET	👥 User API App
31	JSON → Model	📰 News Reader
32	Loading, Error, Empty State	🌦️ Weather App
33	Mini Project API	🍳 Recipe API App

Siswa belajar alur:

Flutter
   ↓
HTTP Request
   ↓
API
   ↓
JSON
   ↓
Model
   ↓
Flutter UI

Ini akan menjadi jembatan menuju backend/API/database.

---

FASE 7 — PROJECT AKHIR

Minggu 34–36

Di tiga minggu terakhir siswa membuat aplikasi yang lebih lengkap.

Minggu 34 — Analisis

Siswa menentukan:

• masalah;
• target pengguna;
• fitur;
• user flow;
• wireframe;
• database/data structure.

Minggu 35 — Development

Siswa mengembangkan:

UI
 ↓
Navigation
 ↓
State
 ↓
CRUD
 ↓
Storage/API

Minggu 36 — Presentasi

Setiap kelompok melakukan:

Demo → Presentasi → Testing → Dokumentasi

---

🚀 CONTOH PROJECT AKHIR

Saya sarankan jangan semua siswa membuat aplikasi yang sama.

Beri beberapa pilihan:

Kelompok 1

🍱 Aplikasi Pemesanan Kantin

Kelompok 2

📚 Aplikasi Perpustakaan

Kelompok 3

🧹 Aplikasi Piket Kelas

Kelompok 4

💰 Aplikasi Keuangan Siswa

Kelompok 5

📦 Aplikasi Inventaris

Kelompok 6

📝 Aplikasi To Do List

Kelompok 7

🎫 Aplikasi Event Sekolah

Kelompok 8

🏫 Aplikasi Informasi Sekolah

---

🎯 SKEMA KEMAMPUAN SISWA

Road map tersebut sebenarnya membentuk tangga kemampuan:

LEVEL 1
DART
│
├── Variable
├── Function
├── List
└── Conditional
       ↓
LEVEL 2
FLUTTER UI
│
├── Widget
├── Layout
├── Form
└── Theme
       ↓
LEVEL 3
INTERACTION
│
├── Button
├── Input
├── setState
└── Navigation
       ↓
LEVEL 4
CRUD
│
├── Create
├── Read
├── Update
└── Delete
       ↓
LEVEL 5
DATA
│
├── Local Storage
├── JSON
└── Model
       ↓
LEVEL 6
API
│
├── HTTP
├── REST API
└── JSON
       ↓
LEVEL 7
PROJECT
│
└── Aplikasi Mobile
      siap dipresentasikan

⭐ Pola pembelajaran setiap minggu

Agar siswa tidak hanya copy-paste kode dari AI, saya sarankan setiap pertemuan menggunakan pola:

15% → Konsep

Guru menjelaskan konsep baru.

20% → Demo

Guru membuat contoh kecil bersama siswa.

45% → Praktik

Siswa memodifikasi dan mengembangkan aplikasi.

20% → Challenge

Berikan fitur tambahan yang tidak ada di contoh guru.

Misalnya:

"Aplikasi To Do List sudah bisa tambah dan hapus tugas. Sekarang tambahkan fitur prioritas tugas."

Dengan demikian AI boleh digunakan sebagai asisten coding, tetapi siswa tetap harus memahami program.

---

📱 Target produk selama satu tahun

Jika konsisten dengan pola ini, satu siswa/kelompok akan memiliki portofolio seperti:

1. 👋 Hello Flutter
2. 🪪 Kartu Profil
3. 🏫 Dashboard Sekolah
4. 🍔 Menu Kantin
5. 📝 Form Siswa
6. 🔢 Counter
7. 🎨 UI Modern
8. 📋 Form Pendaftaran
9. 📱 Multi Page App
10. 👤 Profil Siswa
11. 🏫 School App
12. 📚 Library App
13. 🔢 Counter Pro
14. 🚦 Kehadiran
15. 🛒 Shopping List
16. ✅ To Do List
17. 📋 Task Manager
18. 🧹 Piket Kelas
19. 👥 Data Siswa
20. 📚 Data Buku
21. 📦 Data Barang
22. 🛍️ Data Produk
23. 🔎 Search App
24. 🏪 Inventaris
25. 💾 Local Storage
26. ⚙️ Settings
27. 📝 Persistent To Do
28. 💰 Keuangan
29. 🌐 API Explorer
30. 👥 User API
31. 📰 News App
32. 🌦️ Weather App
33. 🍳 Recipe App
    34–36. 🚀 Final Project

Hasil akhirnya bukan hanya nilai, tetapi portofolio aplikasi Flutter yang bisa mereka dokumentasikan di blog/GitHub dan dipresentasikan sebagai karya PPLG/RPL.