• Apa itu FlutterFlow dan bagaimana cara kerjanya

• Perbedaan Flutter vs FlutterFlow (secara visual)

• Membuat akun FlutterFlow & menjelajahi dashboard

• Mengenal area kerja: Canvas, Widget Tree, Properties Panel

• Membuat project baru: memilih nama & tipe proyek

• Struktur folder: Pages, Components, Custom Functions

• Menambahkan halaman baru dan preview mode

• Menjelaskan "Live Preview" & "Run Mode"

• Perbedaan Row vs Column

• Container dan perannya dalam desain

• Mengatur padding, margin, alignment

• Aktivitas: Susun 3 kotak warna-warni sejajar & vertikal

• Menambahkan Text Widget dan mengubah tampilannya

• Font, size, weight, dan alignment

• Menyesuaikan tema warna aplikasi

• Membuat heading dan body text sesuai UI standar

• Menggunakan berbagai macam tombol (text, elevated, icon)

• Menambahkan gambar dari URL dan Assets

• Menyisipkan icon (Material Icons)

• Desain halaman profil sederhana

• Mengenal tipe navigasi: push, replace, pop

• Membuat halaman baru dan berpindah dengan tombol

• Membuat tombol “kembali” dan “lanjut”

• Aktivitas: Buat halaman login → dashboard

• Struktur halaman: Header, Foto, Biodata

• Desain responsive dengan Column dan Card

• Penambahan ScrollView

• Aktivitas: Build mini project "Tentang Saya"

• Review komponen yang sudah digunakan

• Setiap siswa mempresentasikan aplikasinya

• Sesi tanya jawab dan peer feedback

• Hierarki visual: apa yang ditonjolkan terlebih dahulu?

• Kesesuaian warna, ukuran, dan spasi

• Contoh UI buruk dan UI baik

• Aktivitas: Perbaiki tampilan halaman contoh

• Apa itu UX dan bedanya dengan UI

• Interaksi pengguna: feedback, loading, error

• Latihan: Mengidentifikasi UX buruk di aplikasi nyata

• Menggunakan Bottom Navigation dan AppBar

• Menentukan halaman utama (home)

• Navigasi 3 halaman dengan TabBar atau BottomNav

• Halaman grid galeri gambar

• Navigasi ke halaman detail gambar

• Tambahkan efek hover atau transisi (animated page)

• Switch, Slider, Rating Bar

• Checkbox dan Radio Button

• Aktivitas: Membuat halaman pengaturan (setting screen)

• Menambahkan dialog, snackbar, alert

• Memberi tahu pengguna saat aksi berhasil atau gagal

• Simulasi loading state dan empty state

• Mengecek error UI dan layout yang tidak responsif

• Mengatur kembali struktur widget jika berantakan

• Refactor halaman agar lebih rapi

• Tantangan: Buat aplikasi 3 halaman (Home, Galeri, Profil)

• Elemen wajib: Navigasi, gambar, teks, tombol, komponen interaktif

• Penilaian: tampilan, susunan, responsif, UX dasar

• Apa itu state dalam aplikasi?

• Perbedaan Local State, Global State, dan Firebase State

• Cara membuat dan memodifikasi state di FlutterFlow

• Contoh: Variabel counter, isLoggedIn, selectedTab

• Membuat Local State pada halaman

• Menghubungkan (bind) state ke Text, Switch, Icon

• Aktivitas: Toggle switch → ubah teks ON/OFF

• Membuat App State yang bisa dibaca lintas halaman

• Contoh: userName, theme, language

• Latihan: Simpan nama dari halaman login dan tampilkan di beranda

• Menyembunyikan/memperlihatkan widget berdasarkan kondisi

• Contoh: hanya tampilkan tombol jika switch aktif

• Aktivitas: Formulir dengan field tambahan jika checkbox dicentang

• Jenis-jenis Actions: navigate, show alert, set state, etc.

• Menambahkan action pada tombol atau icon

• Latihan: Tombol hitung jumlah klik (counter)

• Menambahkan logika: if/else, kondisi boolean

• Flow branching menggunakan Logic Builder

• Contoh: Jika user sudah login → ke halaman dashboard

• Memberi jeda waktu sebelum pindah halaman (delay)

• Membuat splash screen dengan delay 2 detik

• Menambahkan animasi transisi halaman dan efek muncul

• Input data ke local state list

• Menampilkan list secara dinamis

• Menghapus item dari list

• Optional: Tandai item selesai dengan checkbox

• Perbedaan antara Alert, Modal, dan Bottom Sheet

• Menampilkan form dalam modal

• Aktivitas: Buat popup form tambah data

• Membuat halaman dengan TabBar

• Menghubungkan state dengan tab aktif

• Latihan: Tab "Tugas Hari Ini", "Tugas Besok"

• Widget input lanjutan & interaksi pengguna

• Contoh: Rating bintang → tampilkan nilai

• Simulasi pengaturan (Settings App)

• Formulir dengan validasi dan kondisi

• Contoh: field tambahan hanya muncul jika user pilih "lainnya"

• Review UX dari formulir aplikasi nyata

• Menggunakan snackbar, alert, dan loading spinner

• Memberi feedback pengguna saat input sukses/gagal

• Contoh: tombol submit → spinner → alert sukses

• Kesalahan umum di state dan action

• Solusi: preview logic, log debug value

• Praktik: menemukan dan memperbaiki kesalahan form dinamis

• Mengevaluasi proyek To-Do dan Form

• Menambahkan animasi, transisi, warna tema

• Simulasi pengujian oleh teman

Tugas:

• Bangun aplikasi dengan fitur:

  • Daftar tugas

  • Pengaturan tema (mode gelap)

  • Navigasi tab atau bottom nav

  • Notifikasi & feedback user

• Presentasi singkat setiap siswa

• Penilaian berdasarkan: fungsi, tampilan, UX, dan kreativitas

• Apa itu backend dalam aplikasi

• Peran database, server, dan API

• Penjelasan konsep client-server secara visual

• Mengenal Supabase sebagai backend gratis untuk FlutterFlow

• Membuat akun Supabase

• Membuat project dan table sederhana: users, tasks

• Menghubungkan Supabase ke FlutterFlow

• Menguji koneksi & pengambilan data sederhana

• Menampilkan data dari Supabase ke halaman FlutterFlow

• Bind data ke list, card, atau tabel

• Menyaring (filter) dan mengurutkan (sort) data

• Contoh: menampilkan daftar tugas pengguna

• Form input data (nama tugas, deskripsi, deadline)

• Menyimpan data ke Supabase saat tombol diklik

• Validasi form & feedback alert sukses/gagal

• Praktik: Tambah tugas ke database

• Mengedit data dari Supabase

• Mengisi form dengan data lama (initial value)

• Menggunakan action “Update Record”

• Contoh: Ubah status tugas (selesai/belum)

• Menambahkan tombol hapus di list

• Konfirmasi sebelum hapus dengan dialog

• Menghapus data dari Supabase

• Aktivitas: Hapus tugas berdasarkan ID

• Membuat form login dan register

• Mengatur Supabase Auth

• Mengarahkan user ke halaman berbeda jika sudah login

• Menyimpan user ID ke global state

• Menyimpan sesi user di FlutterFlow

• Menampilkan nama pengguna yang sedang login

• Logout dan redirect ke halaman login

• Aktivitas: Tambahkan auth ke aplikasi to-do

• Mengenal storage Supabase

• Form upload gambar atau dokumen

• Menyimpan URL file ke database

• Aktivitas: Upload foto profil pengguna

• Bind gambar dari Supabase Storage ke Image Widget

• Membuat galeri dari daftar URL

• Optional: Preview dokumen PDF di WebView (mode Web)

• Apa itu API? Penjelasan singkat JSON dan endpoint

• Mengenal API publik (quotes, cuaca, berita, dsb)

• Menggunakan API Tool di FlutterFlow

• Ambil data dari API: nama, gambar, deskripsi

• Tampilkan data ke dalam list

• Contoh: API Quotes → tampilkan quote harian

• Mengaktifkan fitur realtime di Supabase

• Notifikasi otomatis saat data berubah

• Simulasi: Update tugas oleh siswa A → langsung terlihat oleh siswa B

• Filter data berdasarkan user ID atau status

• Sorting berdasarkan waktu (deadline)

• Kombinasi filter: tampilkan tugas milik user dan status belum selesai

• Review: Create → Read → Update → Delete

• Review: Login, upload, dan API

• Siswa saling mencoba aplikasi teman (peer test)

• Buat aplikasi dengan fitur:

  • Login/Register

  • CRUD catatan pribadi

  • Upload gambar di setiap catatan

  • Fitur sorting dan filtering

• Presentasi: Jelaskan struktur databasenya & logic utama

• Menjelaskan tujuan, target, dan output akhir proyek

• Menampilkan contoh aplikasi sederhana sebagai inspirasi

• Siswa memilih jenis aplikasi yang akan dibuat:

  • Edukasi

  • Islami

  • Sosial

  • Manajemen tugas

  • Produk digital, dll

• Menentukan target pengguna aplikasi

• Mengisi worksheet "masalah yang ingin diselesaikan"

• Membuat daftar fitur utama berdasarkan kebutuhan user

• Diskusi peer-to-peer untuk validasi ide

• Membuat flow aplikasi: navigasi, fitur, alur data

• Menggambar wireframe di Figma, Whimsical, atau kertas

• Presentasi singkat flow & wireframe ke mentor

• Buat project baru dan atur struktur halaman

• Membuat template page, navbar, dan skeleton UI

• Menyiapkan Global State (seperti nama user, login state, dsb.)

• Desain Home, Onboarding, atau Dashboard

• Tambahkan Bottom Navigation atau Drawer

• Buat halaman login (jika belum ada)

• Membuat 1 fitur utama dengan koneksi ke Supabase

• Contoh: buat catatan, menambahkan data tugas, dsb.

• Uji coba input dan tampilkan datanya

• Menambahkan validasi form

• Menangani error saat input tidak valid

• Menampilkan notifikasi sukses atau gagal

• Gunakan Supabase Auth

• Simpan data user (email, nama, UID)

• Membuat halaman “Akun Saya” yang menampilkan data login

• Form upload file ke Supabase Storage

• Simpan URL gambar ke tabel Supabase

• Tampilkan preview gambar di halaman utama atau detail

• Tambahkan fitur seperti:

  • Quote harian

  • API Al-Quran

  • API Cuaca

• Tampilkan hasil API di UI dengan loader

• Evaluasi ulang desain: warna, font, tombol, animasi

• Menambahkan loading state, empty state, dan error handling

• Uji coba dengan berbagai ukuran layar

• Teman sebaya mencoba aplikasi & memberikan feedback

• Gunakan checklist sederhana:

  • Navigasi lancar?

  • Semua tombol berfungsi?

  • Error jelas?

• Menyusun dokumentasi proyek:

  • Nama Aplikasi

  • Masalah & solusi

  • Fitur

  • Teknologi digunakan

  • Screenshot & link project

• Tulis dalam Google Docs / Notion / Canva

• Siswa menampilkan aplikasinya (5–7 menit)

• Struktur presentasi:

  1. Latar belakang

  2. Fitur utama

  3. Demo langsung

  4. Tantangan yang dihadapi

• QnA ringan dari teman/guru

• Siswa menulis refleksi belajar:

  • Hal tersulit

  • Hal paling seru

  • Rencana ke depan (mau dikembangkan?)

• Guru memberi feedback umum dan apresiasi

• Pameran mini hasil karya siswa

• Penyerahan sertifikat

• Penghargaan:

  • Best UI Design

  • Best App Idea

  • Best Presentation

• Dokumentasi dan foto bersama