Roadmap Belajar Flutter Vibe Coding

Roadmap ini dibuat untuk belajar Flutter Mobile dengan bantuan AI assistant.

Tujuannya bukan hanya cepat membuat aplikasi, tetapi juga memahami konsep Flutter sambil praktik. Kita akan memakai AI untuk membantu:

menjelaskan konsep
membuat contoh kode
membuat latihan
membaca error
refactor kode
membuat dokumentasi belajar
menyusun project bertahap

Prinsip utamanya:

AI membantu mempercepat.
Kita tetap wajib memahami.

1. Cara Memakai Roadmap Ini

Roadmap ini dibagi menjadi beberapa fase.

Setiap fase punya:

tujuan belajar
materi utama
prompt yang bisa dipakai
latihan kecil
mini project
checklist sebelum lanjut

Jangan buru-buru pindah fase. Lebih baik satu fase benar-benar dipahami daripada banyak materi tetapi hanya copy-paste.

Pola belajar yang disarankan:

1. Baca konsep
2. Minta AI jelaskan ulang
3. Minta contoh kecil
4. Jalankan kode
5. Ubah sedikit kodenya
6. Catat error dan solusi
7. Buat mini project
8. Review hasil dengan AI

2. Gambaran Roadmap

Urutan belajar:

Fase 0  - Mindset Vibe Coding
Fase 1  - Setup Flutter dan Tools
Fase 2  - Dart Dasar
Fase 3  - Widget dan Layout
Fase 4  - StatefulWidget dan setState
Fase 5  - Form dan Validasi
Fase 6  - List, CRUD Lokal, Search, Filter
Fase 7  - Local Storage
Fase 8  - State Management
Fase 9  - Repository Pattern
Fase 10 - Firebase Auth
Fase 11 - Firestore CRUD
Fase 12 - Security Rules
Fase 13 - Project Mobile Lengkap
Fase 14 - Debugging, Refactor, Testing
Fase 15 - Build, Release, dan Dokumentasi

Estimasi waktu:

santai: 8 sampai 12 minggu
intensif: 4 sampai 6 minggu
sangat pemula: 3 sampai 4 bulan

Yang penting bukan cepat selesai, tetapi konsisten praktik.

3. Fase 0: Mindset Vibe Coding

Tujuan

Memahami cara belajar dengan AI tanpa kehilangan kemampuan dasar.

Yang Dipelajari

apa itu vibe coding
cara membuat prompt yang jelas
cara mengecek kode AI
cara meminta penjelasan
cara mencatat error
cara tidak bergantung total pada AI

Prompt Belajar

Saya sedang belajar Flutter Mobile dengan pendekatan vibe coding.
Jelaskan cara belajar yang benar agar saya tidak hanya copy-paste kode.
Buatkan aturan belajar harian, checklist review kode, dan contoh prompt yang bagus.

Latihan

Minta AI membuat contoh CounterPage, lalu lakukan sendiri:

ubah warna tombol
tambah tombol reset
cegah angka kurang dari nol
jelaskan ulang fungsi setState

Checklist

Sebelum lanjut, pastikan kamu bisa:

menjelaskan apa itu vibe coding
membuat prompt dengan konteks jelas
membaca kode sederhana dari AI
menjalankan kode
bertanya ulang saat belum paham

4. Fase 1: Setup Flutter dan Tools

Tujuan

Menyiapkan environment untuk membuat aplikasi Flutter Mobile.

Yang Dipelajari

install Flutter SDK
cek flutter doctor
setup Android Studio atau VS Code
setup emulator atau device fisik
membuat project pertama
menjalankan aplikasi
memahami struktur folder awal

Prompt Belajar

Saya ingin setup Flutter untuk mobile development.
Tolong buatkan checklist setup dari nol:
- Flutter SDK
- Android Studio
- emulator
- flutter doctor
- membuat project pertama
- menjalankan di emulator
Jelaskan error umum dan solusinya.

Command Penting

flutter doctor
flutter create nama_project
flutter run
flutter devices

Latihan

Buat project:

flutter create belajar_vibe_coding

Lalu jalankan di emulator atau device.

Checklist

Sebelum lanjut, pastikan:

flutter doctor tidak memiliki error besar
project bisa dibuat
aplikasi bisa dijalankan
kamu tahu lokasi file lib/main.dart
kamu bisa melakukan hot reload

5. Fase 2: Dart Dasar

Tujuan

Memahami bahasa Dart sebagai dasar sebelum masuk Flutter lebih jauh.

Yang Dipelajari

variable
var, final, const
tipe data
function
if else
loop
List
Map
class
null safety
async dan await dasar

Prompt Belajar

Jelaskan Dart dasar untuk pemula Flutter.
Untuk setiap topik, berikan:
- penjelasan sederhana
- contoh kode kecil
- kesalahan umum
- latihan kecil
Topik: variable, final, const, function, List, Map, class, null safety, async await.

Latihan

Buat class Task:

class Task {
  final String title;
  final bool isDone;

  const Task({
    required this.title,
    this.isDone = false,
  });
}

Lalu buat:

list task
function tambah task
function tampilkan task
function hitung task selesai

Checklist

Sebelum lanjut, pastikan kamu bisa:

membedakan var, final, dan const
membuat function sederhana
memakai List
memakai Map
membuat class
memahami nullable seperti String?
membaca kode Dart sederhana

Tujuan

Memahami bahwa UI Flutter dibangun dari widget.

Yang Dipelajari

MaterialApp
Scaffold
AppBar
Text
Icon
Container
Padding
SizedBox
Column
Row
Stack
Expanded
ListView
responsive sederhana

Prompt Belajar

Saya sedang belajar widget dan layout Flutter.
Buatkan contoh halaman profil sederhana dengan:
- AppBar
- avatar
- nama user
- bio
- tombol edit profil
- list informasi akun
Gunakan widget dasar dan jelaskan fungsi Column, Row, Padding, Expanded, dan ListView.

Latihan

Buat 3 screen:

ProfilePage
ProductCardPage
SettingsPage

Setiap screen harus memakai:

Scaffold
Column
Row
Padding
Container
minimal satu button

Checklist

Sebelum lanjut, pastikan kamu bisa:

membuat halaman sederhana
memahami fungsi Scaffold
membuat layout vertikal dengan Column
membuat layout horizontal dengan Row
mengatasi overflow sederhana
memakai Expanded
membuat list dengan ListView

7. Fase 4: StatefulWidget dan setState

Tujuan

Memahami state lokal di Flutter.

Yang Dipelajari

bedanya StatelessWidget dan StatefulWidget
apa itu state
setState
TextEditingController
lifecycle sederhana
dispose

Prompt Belajar

Jelaskan StatefulWidget dan setState untuk pemula Flutter.
Buatkan contoh:
- counter
- toggle dark mode sederhana
- input nama lalu tampilkan hasil
Jelaskan kapan harus memakai dispose.

Latihan

Buat halaman:

NamePreviewPage

Fitur:

input nama
tampilkan teks “Halo, [nama]”
tombol clear
jika input kosong tampilkan “Belum ada nama”

Checklist

Sebelum lanjut, pastikan kamu bisa:

membuat StatefulWidget
mengubah nilai dengan setState
memakai TextEditingController
memanggil dispose
menjelaskan kenapa UI bisa berubah

8. Fase 5: Form dan Validasi

Tujuan

Membuat input user yang rapi dan aman.

Yang Dipelajari

TextField
TextFormField
Form
GlobalKey<FormState>
validasi input
password field
loading button
error message

Prompt Belajar

Buatkan LoginPage Flutter untuk pemula.
Gunakan Form dan TextFormField.
Validasi:
- email wajib diisi
- email harus mengandung @
- password wajib diisi
- password minimal 6 karakter
Tambahkan loading button simulasi 1 detik.
Jelaskan setiap bagian kode.

Latihan

Buat:

LoginPage
RegisterPage
EditProfilePage

Checklist

Sebelum lanjut, pastikan kamu bisa:

membuat form
membuat validasi
menampilkan error input
membuat tombol loading
mengambil value dari input
membersihkan controller

Tujuan

Membuat fitur utama aplikasi mobile: data list yang bisa dikelola user.

Yang Dipelajari

model data
tambah data
tampilkan data
edit data
hapus data
search
filter
empty state

Prompt Belajar

Buatkan Task Manager lokal di Flutter.
Gunakan StatefulWidget.
Fitur:
- tambah task
- edit task
- hapus task
- checkbox selesai
- search berdasarkan title
- filter semua, aktif, selesai
Pisahkan model Task.
Jelaskan alur datanya.

Mini Project

Task Manager Lokal

Fitur wajib:

tambah task
edit task
hapus task
tandai selesai
search
filter
empty state

Checklist

Sebelum lanjut, pastikan:

CRUD lokal berjalan
search berjalan
filter berjalan
tidak error saat list kosong
UI tetap rapi saat data banyak
kamu paham alur List<Task>

10. Fase 7: Local Storage

Tujuan

Menyimpan data agar tidak hilang saat aplikasi ditutup.

Yang Dipelajari

shared_preferences
JSON encode dan decode
toJson
fromJson
load data saat app dibuka
save data setelah perubahan

Prompt Belajar

Saya punya Task Manager lokal.
Bantu upgrade agar data tersimpan memakai shared_preferences.
Tolong buat:
- toJson dan fromJson di model Task
- TaskStorageService
- loadTasks
- saveTasks
- update save setelah add, edit, delete, toggle
Jelaskan alur penyimpanan datanya.

Mini Project

Upgrade Task Manager lokal menjadi:

Task Manager dengan Local Storage

Checklist

Sebelum lanjut, pastikan:

task tetap ada setelah app ditutup
task yang dihapus tidak muncul lagi setelah app dibuka
perubahan selesai/belum selesai tersimpan
JSON bisa dijelaskan
toJson dan fromJson dipahami

11. Fase 8: State Management

Tujuan

Memisahkan logic state dari UI.

Yang Dipelajari

kenapa state management dibutuhkan
Provider
Riverpod
Cubit
loading state
error state
pemisahan UI dan logic

Prompt Belajar

Saya sudah punya Task Manager dengan StatefulWidget.
Bantu upgrade ke state management.
Mulai dari Provider untuk pemula.
Pisahkan:
- Task model
- TaskProvider
- TaskPage
- TaskStorageService
Jelaskan alur UI -> Provider -> Storage.

Latihan

Pilih salah satu dulu:

Provider
Riverpod
Cubit

Jangan belajar semuanya sekaligus dalam satu hari.

Checklist

Sebelum lanjut, pastikan:

UI tidak terlalu banyak logic
state bisa ditambah dari provider/notifier/cubit
loading dan error dipahami
kamu bisa menjelaskan alur data

12. Fase 9: Repository Pattern

Tujuan

Merapikan akses data agar aplikasi siap berkembang.

Yang Dipelajari

apa itu repository
bedanya service dan repository
TaskRepository
dependency sederhana
error handling
pemisahan data source

Prompt Belajar

Refactor Task Manager saya agar memakai Repository Pattern.
Saat ini UI/state langsung memanggil TaskStorageService.
Buatkan:
- TaskRepository
- TaskStorageService
- alur UI -> State -> Repository -> Storage
Jelaskan kenapa repository berguna.

Checklist

Sebelum lanjut, pastikan:

tahu fungsi repository
tidak semua logic data berada di UI
repository punya method jelas
kode lebih mudah dibaca
siap mengganti local storage ke Firebase/API

13. Fase 10: Firebase Authentication

Tujuan

Membuat sistem login dan register.

Yang Dipelajari

setup Firebase project
firebase_core
firebase_auth
flutterfire configure
email password login
register
logout
auth state
uid

Prompt Belajar

Bantu saya membuat Firebase Authentication di Flutter.
Kondisi:
- project Flutter sudah dibuat
- Firebase sudah dikonfigurasi
Target:
- LoginPage
- RegisterPage
- AuthRepository
- AuthWrapper
- logout
Gunakan email dan password.
Jelaskan fungsi authStateChanges dan uid.

Checklist

Sebelum lanjut, pastikan:

user bisa register
user bisa login
user bisa logout
app tahu user sedang login atau belum
kamu paham fungsi uid
error login tampil ke user

14. Fase 11: Firestore CRUD

Tujuan

Menyimpan data online di Cloud Firestore.

Yang Dipelajari

collection
document
add
get
snapshots
update
delete
query
orderBy
data per user

Prompt Belajar

Bantu upgrade Task Manager saya ke Cloud Firestore.
Target:
- setiap task punya userId
- add task ke Firestore
- watch task realtime
- update task
- delete task
- query task milik user login
- gunakan TaskRepository
Jelaskan collection structure dan query-nya.

Checklist

Sebelum lanjut, pastikan:

task masuk ke Firestore
task muncul realtime
task bisa update
task bisa delete
task punya userId
user A tidak melihat task user B

15. Fase 12: Security Rules

Tujuan

Mengamankan data Firestore.

Yang Dipelajari

request.auth
request.auth.uid
resource.data
request.resource.data
read rule
create rule
update rule
delete rule
validasi field

Prompt Belajar

Buatkan Firestore Security Rules untuk aplikasi Task Manager.
Struktur document:
- title
- isDone
- userId
- createdAt
- updatedAt
Aturan:
- user harus login
- user hanya bisa membaca task miliknya
- user hanya bisa membuat task dengan userId miliknya
- user tidak boleh mengganti userId saat update
- validasi title tidak kosong
Jelaskan setiap bagian rules.

Checklist

Sebelum lanjut, pastikan:

rules tidak allow read, write: if true
user harus login
task user lain tidak bisa dibaca
userId tidak bisa diganti
permission denied dipahami
sudah testing dengan dua akun

16. Fase 13: Project Mobile Lengkap

Tujuan

Menggabungkan semua materi menjadi aplikasi nyata.

Project Rekomendasi

Pilih salah satu:

Habit Tracker
Expense Tracker
Study Notes App
Task Manager Online
Inventory App sederhana

Struktur Project

Gunakan struktur:

lib/
  core/
    errors/
    theme/
  features/
    auth/
    tasks/
    profile/
  shared/
    widgets/

Prompt Belajar

Saya ingin membuat project Flutter Mobile lengkap untuk portfolio.
Nama project: Habit Tracker.
Bantu susun:
- fitur MVP
- struktur folder
- model data
- screen list
- screen form
- local storage atau Firebase
- state management
- roadmap pengerjaan 7 hari
Jangan langsung buat semua kode. Pecah per tahap.

Checklist

Project dianggap layak jika:

punya minimal 4 screen
punya CRUD
punya storage lokal atau Firebase
punya loading state
punya error state
UI rapi di mobile
kode dipisah rapi
ada README project

17. Fase 14: Debugging, Refactor, Testing

Tujuan

Membiasakan diri memperbaiki dan merapikan kode.

Yang Dipelajari

membaca error console
menggunakan flutter analyze
format kode
refactor widget
refactor repository
testing manual
widget test dasar

Prompt Debugging

Saya mengalami error Flutter berikut.
Tolong bantu:
- jelaskan penyebab
- tunjukkan file yang mungkin bermasalah
- berikan solusi
- jelaskan kenapa solusi ini bekerja
- beri checklist testing setelah perbaikan

Error:
[paste error lengkap]

Kode terkait:
[paste kode]

Command Penting

flutter analyze
dart format .
flutter test

Checklist

Sebelum lanjut, pastikan:

error bisa dibaca pelan-pelan
tidak panik saat aplikasi crash
bisa minta AI menjelaskan error
bisa refactor widget panjang
punya checklist testing manual

18. Fase 15: Build, Release, dan Dokumentasi

Tujuan

Menyiapkan aplikasi agar bisa dibagikan atau dijadikan portfolio.

Yang Dipelajari

app name
app icon
splash screen
build APK
build release
README project
screenshot aplikasi
changelog sederhana

Prompt Belajar

Bantu saya menyiapkan project Flutter untuk portfolio.
Buatkan checklist:
- app icon
- splash screen
- nama aplikasi
- build APK
- README
- screenshot
- fitur utama
- cara menjalankan project

Checklist

Sebelum project dibagikan:

aplikasi bisa berjalan dari fresh install
tidak ada debug banner
nama aplikasi sudah benar
icon sudah diganti
README jelas
screenshot tersedia
fitur utama sudah dites

19. Jadwal Belajar 4 Minggu

Minggu 1: Dasar Flutter

Target:

setup Flutter
Dart dasar
widget dasar
layout
StatefulWidget

Output:

Counter App
Profile Page
Simple Form

Minggu 2: CRUD dan Storage

Target:

list
CRUD lokal
search
filter
shared preferences

Output:

Task Manager Lokal
Task Manager dengan Local Storage

Minggu 3: State dan Architecture

Target:

Provider atau Riverpod
Repository Pattern
error handling
refactor

Output:

Task Manager dengan State Management
struktur folder lebih rapi

Minggu 4: Firebase dan Project

Target:

Firebase Auth
Firestore CRUD
Security Rules
project portfolio

Output:

Task Manager Online per User
README project
dokumentasi belajar

20. Jadwal Belajar 8 Minggu

Kalau ingin lebih santai:

Minggu	Fokus	Output
1	Setup dan Dart dasar	latihan Dart kecil
2	Widget dan layout	3 screen statis
3	State dan form	form login/register dummy
4	CRUD lokal	Task Manager lokal
5	Local storage	Task tersimpan permanen
6	State management	Task Manager dengan Provider/Riverpod/Cubit
7	Firebase	Auth dan Firestore CRUD
8	Project portfolio	aplikasi kecil siap demo

21. Aturan Prompt per Fase

Gunakan pola prompt ini di setiap fase:

Saya sedang berada di fase [nama fase].
Level saya: pemula.
Saya ingin belajar [topik].

Buatkan:
- penjelasan sederhana
- contoh kode kecil
- latihan bertahap
- kesalahan umum
- checklist sebelum lanjut

Jangan langsung terlalu kompleks.

Contoh:

Saya sedang berada di fase CRUD lokal.
Level saya: pemula.
Saya ingin belajar membuat fitur edit task.

Buatkan:
- penjelasan sederhana
- contoh kode kecil
- latihan bertahap
- kesalahan umum
- checklist sebelum lanjut

Gunakan StatefulWidget dulu.

22. Checklist Naik Level

Kamu boleh lanjut ke materi lebih sulit jika sudah bisa:

membuat screen tanpa melihat contoh terus-menerus
memahami error sederhana
membuat model class
membuat CRUD lokal
menyimpan data lokal
memakai minimal satu state management
membuat repository sederhana
menghubungkan Firebase Auth
membuat Firestore CRUD
menjelaskan kode sendiri
membuat catatan belajar

Kalau belum, ulangi fase yang masih lemah.

23. Cara Dokumentasi Belajar

Setelah setiap sesi belajar, tulis catatan:

# Catatan Belajar Flutter

## Tanggal
2026-07-23

## Topik
CRUD lokal dengan StatefulWidget

## Yang Dibuat
- model Task
- tambah task
- hapus task
- toggle selesai

## Error
- List tidak update karena lupa setState

## Solusi
- masukkan perubahan list ke dalam setState

## Pemahaman Baru
- state berubah harus diberitahu ke Flutter
- ListView membaca data dari list

## Next
- tambah fitur edit task

Dokumentasi ini membuat hasil vibe coding tidak hilang.

24. Kesalahan Roadmap yang Harus Dihindari

Belajar terlalu acak

Hari ini Firebase, besok animasi, lusa payment. Akhirnya dasar tidak kuat.

Ikuti urutan:

dasar -> CRUD -> storage -> state -> architecture -> Firebase -> project

Terlalu cepat masuk project besar

Project besar boleh, tetapi pecah dulu menjadi fitur kecil.

Tidak review kode AI

Setiap kode dari AI harus dibaca, dijalankan, dan dipahami.

Tidak punya output mingguan

Belajar lebih terasa jika tiap minggu punya hasil nyata.

Contoh:

minggu 1: profile page
minggu 2: task lokal
minggu 3: task storage
minggu 4: task online

25. Kesimpulan

Roadmap Flutter Vibe Coding membantu kamu belajar dengan arah yang jelas.

Urutan paling aman:

Dart dasar
-> Widget
-> State
-> Form
-> CRUD lokal
-> Local storage
-> State management
-> Repository
-> Firebase
-> Security
-> Project

AI dipakai untuk mempercepat proses, tetapi kemampuan developer tetap dibangun lewat:

membaca kode
menjalankan aplikasi
memahami error
membuat latihan
mencatat solusi
mengulang konsep penting

Kalau roadmap ini diikuti dengan konsisten, kamu tidak hanya bisa membuat aplikasi Flutter, tetapi juga paham cara mengembangkan aplikasi mobile secara bertahap.

26. Selanjutnya

Materi berikutnya yang cocok adalah Project Flutter Mobile dengan Vibe Coding: Habit Tracker.

Di sana kita akan memakai roadmap ini secara nyata: mulai dari ide, fitur MVP, prompt, struktur folder, implementasi, debugging, local storage, sampai checklist selesai.

Roadmap Belajar Flutter Vibe Coding

1. Cara Memakai Roadmap Ini

2. Gambaran Roadmap

3. Fase 0: Mindset Vibe Coding

Tujuan

Yang Dipelajari

Prompt Belajar

Latihan

Checklist

4. Fase 1: Setup Flutter dan Tools

Tujuan

Yang Dipelajari

Prompt Belajar

Command Penting

Latihan

Checklist

5. Fase 2: Dart Dasar

Tujuan

Yang Dipelajari

Prompt Belajar

Latihan

Checklist

6. Fase 3: Widget dan Layout

Tujuan

Yang Dipelajari

Prompt Belajar

Latihan

Checklist

7. Fase 4: StatefulWidget dan setState

Tujuan

Yang Dipelajari

Prompt Belajar

Latihan

Checklist

8. Fase 5: Form dan Validasi

Tujuan

Yang Dipelajari

Prompt Belajar

Latihan

Checklist

9. Fase 6: List, CRUD Lokal, Search, Filter

Tujuan

Yang Dipelajari

Prompt Belajar

Mini Project

Checklist

10. Fase 7: Local Storage

Tujuan

Yang Dipelajari

Prompt Belajar

Mini Project

Checklist

11. Fase 8: State Management

Tujuan

Yang Dipelajari

Prompt Belajar

Latihan

Checklist

12. Fase 9: Repository Pattern

Tujuan

Yang Dipelajari

Prompt Belajar

Checklist

13. Fase 10: Firebase Authentication

Tujuan

Yang Dipelajari

Prompt Belajar

Checklist

14. Fase 11: Firestore CRUD

Tujuan

Yang Dipelajari

Prompt Belajar

Checklist

15. Fase 12: Security Rules

Tujuan

Yang Dipelajari

Prompt Belajar

Checklist

16. Fase 13: Project Mobile Lengkap

Tujuan