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:
- 👋 Hello Flutter
- 🪪 Kartu Profil
- 🏫 Dashboard Sekolah
- 🍔 Menu Kantin
- 📝 Form Siswa
- 🔢 Counter
- 🎨 UI Modern
- 📋 Form Pendaftaran
- 📱 Multi Page App
- 👤 Profil Siswa
- 🏫 School App
- 📚 Library App
- 🔢 Counter Pro
- 🚦 Kehadiran
- 🛒 Shopping List
- ✅ To Do List
- 📋 Task Manager
- 🧹 Piket Kelas
- 👥 Data Siswa
- 📚 Data Buku
- 📦 Data Barang
- 🛍️ Data Produk
- 🔎 Search App
- 🏪 Inventaris
- 💾 Local Storage
- ⚙️ Settings
- 📝 Persistent To Do
- 💰 Keuangan
- 🌐 API Explorer
- 👥 User API
- 📰 News App
- 🌦️ Weather App
-
🍳 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.
