Flutter

Flutter Mobile Vibe Coding

Panduan belajar vibe coding untuk Flutter Mobile: cara memakai AI assistant untuk membuat fitur, membaca kode, debugging, refactor, testing, dan dokumentasi tanpa kehilangan pemahaman dasar.

28 dari 57 materi Workflow fluttermobilevibe-codingaiworkflowlearning

Flutter Mobile Vibe Coding

Vibe coding adalah cara membangun aplikasi dengan bantuan AI assistant. Kita menjelaskan tujuan, memberi konteks, meminta AI membuat atau memperbaiki kode, lalu kita menjalankan, mengecek, dan mengarahkan hasilnya.

Untuk Flutter Mobile, vibe coding bisa sangat membantu karena banyak pekerjaan yang berulang:

  • membuat screen
  • membuat widget
  • membuat model
  • membuat repository
  • membuat form
  • membuat CRUD
  • membuat validasi
  • membaca error
  • memperbaiki layout
  • menulis dokumentasi

Tetapi untuk pemula, ada satu hal penting:

Vibe coding bukan berarti tidak perlu belajar dasar. Vibe coding yang bagus adalah belajar sambil membangun.

Materi ini dibuat supaya kamu bisa memakai AI untuk mempercepat belajar Flutter, tetapi tetap paham kode yang dibuat.

1. Apa Itu Vibe Coding?

Vibe coding adalah workflow membuat aplikasi dengan gaya percakapan.

Biasanya alurnya seperti ini:

Kita punya ide fitur
  -> jelaskan ke AI
  -> AI bantu buat kode
  -> kita jalankan aplikasinya
  -> muncul error atau UI kurang sesuai
  -> kita kasih feedback lagi
  -> AI bantu perbaiki
  -> kita review dan pahami kodenya

Contoh sederhana:

Buatkan halaman Flutter untuk daftar task.
Ada input di atas, tombol tambah, list task di bawah,
checkbox untuk selesai, dan tombol hapus.
Gunakan StatefulWidget dulu agar mudah dipahami pemula.

AI bisa membantu membuat struktur awal. Tugas kita adalah memastikan:

  • kode bisa jalan
  • struktur masuk akal
  • UI sesuai kebutuhan
  • error dipahami
  • kode tidak asal ditempel

2. Kenapa Vibe Coding Cocok untuk Belajar Flutter?

Flutter punya banyak konsep yang perlu sering dilatih:

  • widget
  • layout
  • state
  • navigation
  • form
  • async
  • local storage
  • API
  • Firebase

Saat belajar sendiri, sering macet di hal kecil:

  • lupa import
  • bingung struktur folder
  • error dependency
  • layout overflow
  • state tidak update
  • Firestore permission denied
  • kode terlalu panjang

AI bisa menjadi partner belajar untuk:

  • menjelaskan error
  • memberi contoh kode
  • menyederhanakan konsep
  • membuat latihan bertahap
  • membandingkan beberapa pendekatan
  • membantu review kode

Yang penting, jangan hanya meminta hasil akhir. Minta juga penjelasan dan langkah kecil.

3. Prinsip Utama Belajar dengan Vibe Coding

Gunakan prinsip ini:

Generate boleh.
Paham wajib.
Run harus.
Review jangan lupa.

Artinya:

  • boleh meminta AI membuat kode
  • tetap baca kode yang dibuat
  • selalu jalankan aplikasi
  • cek apakah fitur benar-benar bekerja
  • tanyakan bagian yang belum dipahami
  • simpan catatan dari error dan solusi

Kalau hanya copy-paste, kamu mungkin cepat membuat fitur, tetapi mudah bingung saat error.

4. Skill Dasar yang Tetap Harus Dikuasai

Sebelum vibe coding terlalu jauh, pastikan kamu tetap belajar dasar Flutter.

Minimal paham:

  • StatelessWidget
  • StatefulWidget
  • setState
  • Column, Row, Stack
  • Container, Padding, SizedBox
  • TextField
  • ListView
  • Navigator
  • Future
  • Stream
  • async dan await
  • model class
  • toJson dan fromJson
  • state management dasar

Tidak harus langsung ahli. Tapi kamu perlu tahu fungsi tiap bagian agar bisa menilai jawaban AI.

5. Workflow Vibe Coding Flutter Mobile

Gunakan workflow ini saat membuat fitur:

1. Tulis tujuan fitur
2. Pecah menjadi bagian kecil
3. Beri konteks project ke AI
4. Minta implementasi kecil dulu
5. Jalankan aplikasi
6. Catat error
7. Minta AI bantu debug
8. Review kode
9. Refactor jika perlu
10. Tulis dokumentasi singkat

Jangan langsung meminta:

Buatkan aplikasi lengkap seperti Trello dengan login, realtime chat,
push notification, payment, dan admin dashboard.

Lebih baik:

Kita buat Task Manager bertahap.
Tahap pertama: model Task dan halaman list task lokal.
Gunakan kode sederhana untuk pemula.
Jelaskan tiap bagian penting.

6. Cara Memberi Prompt yang Bagus

Prompt yang bagus punya konteks.

Format sederhana:

Saya sedang belajar Flutter.
Saya ingin membuat [fitur].
Project saya memakai [state management/package].
Tolong buatkan langkah bertahap.
Gunakan kode yang mudah dipahami pemula.
Jelaskan fungsi setiap file.

Contoh:

Saya sedang belajar Flutter Mobile.
Saya ingin membuat fitur tambah task.
Project saya masih menggunakan StatefulWidget dan setState.
Tolong buatkan contoh sederhana:
- model Task
- TextField input task
- tombol tambah
- ListView daftar task
- checkbox selesai
Jelaskan tiap bagian kode dengan bahasa pemula.

Prompt seperti ini lebih jelas daripada:

Buat task app Flutter.

7. Template Prompt untuk Membuat Screen

Gunakan template ini:

Buatkan screen Flutter untuk [nama screen].

Kebutuhan UI:
- [komponen 1]
- [komponen 2]
- [komponen 3]

Kebutuhan logic:
- [logic 1]
- [logic 2]

Ketentuan:
- gunakan [StatelessWidget/StatefulWidget/Provider/Riverpod/Cubit]
- kode dipisah jika perlu
- jelaskan file apa saja yang dibuat
- gunakan style sederhana dan rapi
- berikan checklist testing manual

Contoh:

Buatkan screen Flutter untuk LoginPage.

Kebutuhan UI:
- input email
- input password
- tombol login
- link ke register

Kebutuhan logic:
- validasi email tidak kosong
- validasi password minimal 6 karakter
- tampilkan loading saat login
- tampilkan error dengan SnackBar

Ketentuan:
- gunakan StatefulWidget
- belum perlu Firebase dulu
- jelaskan tiap bagian kode
- berikan checklist testing manual

8. Template Prompt untuk Debugging

Saat error, jangan hanya kirim:

Ini error kenapa?

Kirim konteks lengkap.

Template:

Saya sedang membuat fitur [nama fitur] di Flutter.

Yang saya harapkan:
[jelaskan hasil yang diinginkan]

Yang terjadi:
[jelaskan masalah]

Error:
[paste error lengkap]

Kode terkait:
[paste kode file yang relevan]

Tolong bantu:
- jelaskan penyebab error
- tunjukkan bagian kode yang salah
- berikan perbaikan
- jelaskan kenapa perbaikannya bekerja

Contoh:

Saya sedang membuat list task di Flutter.

Yang saya harapkan:
Saat tombol tambah ditekan, task muncul di ListView.

Yang terjadi:
Task tidak muncul, padahal tidak ada error.

Kode terkait:
[paste kode StatefulWidget]

Tolong jelaskan kemungkinan penyebabnya dan perbaiki dengan setState.

9. Template Prompt untuk Refactor

Refactor berarti merapikan kode tanpa mengubah perilaku utama.

Template:

Tolong refactor kode Flutter ini.

Tujuan:
- kode lebih rapi
- nama variable lebih jelas
- logic dipisah dari UI jika perlu
- jangan mengubah behavior

Setelah refactor:
- jelaskan perubahan
- jelaskan risiko
- beri checklist testing manual

Contoh:

Tolong refactor TaskPage ini.
Saat ini semua logic Firestore ada di widget.
Pindahkan logic data ke TaskRepository.
UI tetap sama.
Gunakan kode sederhana untuk pemula.

10. Template Prompt untuk Belajar Konsep

Kalau belum paham konsep, minta AI menjelaskan dengan contoh kecil.

Template:

Jelaskan konsep [nama konsep] di Flutter untuk pemula.

Tolong gunakan format:
- analogi sederhana
- kapan dipakai
- contoh kode kecil
- kesalahan umum
- latihan kecil

Contoh:

Jelaskan StreamBuilder di Flutter untuk pemula.

Tolong gunakan:
- analogi sederhana
- perbedaan FutureBuilder dan StreamBuilder
- contoh kode counter realtime sederhana
- kesalahan umum
- latihan kecil

11. Contoh Vibe Coding: Membuat Counter

Prompt:

Saya belajar Flutter.
Buatkan contoh CounterPage menggunakan StatefulWidget.
Ada tombol plus, minus, dan reset.
Jelaskan fungsi setState.

Contoh hasil kode:

import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int counter = 0;

  void increment() {
    setState(() {
      counter++;
    });
  }

  void decrement() {
    setState(() {
      counter--;
    });
  }

  void reset() {
    setState(() {
      counter = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '$counter',
              style: const TextStyle(fontSize: 48),
            ),
            const SizedBox(height: 16),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(
                  onPressed: decrement,
                  child: const Text('-'),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: reset,
                  child: const Text('Reset'),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: increment,
                  child: const Text('+'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Hal yang harus dipahami:

  • counter adalah state
  • setState memberi tahu Flutter bahwa UI perlu digambar ulang
  • tombol memanggil function
  • Text('$counter') menampilkan nilai terbaru

Latihan:

  • ubah nilai tambah menjadi +2
  • cegah counter kurang dari 0
  • tampilkan teks “Kosong” saat counter 0

12. Contoh Vibe Coding: Membuat Task Lokal

Prompt:

Buatkan TaskPage Flutter untuk pemula.
Gunakan StatefulWidget.
Fitur:
- tambah task dari TextField
- tampilkan task di ListView
- checkbox selesai
- hapus task
Belum perlu local storage.
Jelaskan kode per bagian.

Contoh model:

class Task {
  final String title;
  final bool isDone;

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

  Task copyWith({
    String? title,
    bool? isDone,
  }) {
    return Task(
      title: title ?? this.title,
      isDone: isDone ?? this.isDone,
    );
  }
}

Contoh logic penting:

final List<Task> tasks = [];
final TextEditingController controller = TextEditingController();

void addTask() {
  final title = controller.text.trim();

  if (title.isEmpty) return;

  setState(() {
    tasks.add(Task(title: title));
    controller.clear();
  });
}

void toggleTask(int index) {
  final task = tasks[index];

  setState(() {
    tasks[index] = task.copyWith(isDone: !task.isDone);
  });
}

void deleteTask(int index) {
  setState(() {
    tasks.removeAt(index);
  });
}

Hal yang harus dipahami:

  • list tasks menyimpan data sementara
  • TextEditingController mengambil teks dari input
  • setState membuat UI update
  • copyWith membuat object baru dengan sebagian data berubah
  • removeAt menghapus data berdasarkan index

13. Contoh Vibe Coding: Upgrade ke Local Storage

Prompt:

Saya sudah punya TaskPage lokal dengan StatefulWidget.
Sekarang bantu upgrade agar data tersimpan dengan shared_preferences.

Tolong buat:
- toJson dan fromJson di model Task
- TaskStorageService
- load data saat halaman dibuka
- save data setelah add, toggle, delete
- jelaskan alur datanya

Alur yang diharapkan:

App dibuka
  -> load task dari SharedPreferences
  -> tampilkan task

User tambah/edit/hapus task
  -> update list di memory
  -> save list ke SharedPreferences

Checklist:

  • tambah task
  • tutup aplikasi
  • buka aplikasi lagi
  • task masih ada
  • hapus task
  • tutup aplikasi
  • buka lagi
  • task tetap terhapus

14. Contoh Vibe Coding: Upgrade ke Firebase

Prompt:

Saya punya Task Manager lokal di Flutter.
Sekarang bantu upgrade ke Firebase.

Kondisi project:
- sudah install firebase_core
- sudah install firebase_auth
- sudah install cloud_firestore
- sudah ada firebase_options.dart

Target:
- user login dengan email dan password
- task tersimpan di Firestore
- setiap task punya userId
- user hanya melihat task miliknya
- gunakan TaskRepository
- jelaskan struktur folder

AI seharusnya membantu membuat:

  • AuthRepository
  • TaskRepository
  • Task model
  • LoginPage
  • TaskPage
  • query where('userId', isEqualTo: uid)
  • contoh Security Rules

Hal yang harus dicek manual:

  • apakah Firebase sudah diinisialisasi
  • apakah package sudah terpasang
  • apakah Android/iOS sudah dikonfigurasi
  • apakah user sudah login
  • apakah userId benar
  • apakah rules tidak terlalu terbuka

15. Cara Membaca Kode dari AI

Setelah AI membuat kode, jangan langsung lanjut ke fitur lain.

Baca dengan pola ini:

1. File apa saja yang dibuat?
2. Class apa saja yang dibuat?
3. Data mengalir dari mana ke mana?
4. Function mana yang dipanggil saat tombol ditekan?
5. State berubah di mana?
6. Error ditangani di mana?
7. Apakah ada kode yang belum saya pahami?

Kalau ada bagian yang belum paham, tanya:

Jelaskan bagian ini baris demi baris untuk pemula.
Kenapa perlu dibuat seperti ini?
Apa alternatif yang lebih sederhana?

16. Cara Review Jawaban AI

Gunakan checklist review:

  • apakah kode bisa di-run?
  • apakah import lengkap?
  • apakah nama file sesuai?
  • apakah widget terlalu panjang?
  • apakah ada logic Firebase di UI?
  • apakah ada currentUser! yang berisiko null?
  • apakah ada validasi input?
  • apakah error ditampilkan ke user?
  • apakah state loading ada?
  • apakah data user aman?
  • apakah ada Security Rules?

Untuk Flutter Mobile, cek juga:

  • tidak ada overflow di layar kecil
  • keyboard tidak menutup input penting
  • tombol cukup mudah ditekan
  • loading terlihat
  • empty state jelas
  • error tidak hanya muncul di console

17. Cara Meminta AI Membuat Penjelasan

Prompt:

Jelaskan kode ini untuk pemula.
Gunakan format:
- tujuan file
- penjelasan class
- penjelasan function
- alur saat user menekan tombol
- bagian yang rawan error
- latihan modifikasi kecil

Prompt lanjutan:

Saya belum paham bagian StreamBuilder.
Jelaskan ulang dengan analogi dan contoh yang lebih kecil.

Belajar dengan AI paling efektif saat kamu aktif bertanya.

18. Cara Meminta AI Membuat Latihan

Prompt:

Buatkan latihan Flutter dari materi ini.

Format:
- tujuan latihan
- instruksi
- starter code
- expected output
- hint
- solusi
- checklist

Contoh:

Buatkan latihan dari materi Task Manager lokal.
Latihannya: tambah fitur edit task.
Berikan starter code dan solusi setelahnya.

Dengan latihan, vibe coding tidak hanya membuat aplikasi, tetapi juga memperkuat pemahaman.

19. Kesalahan Umum Saat Vibe Coding

Terlalu banyak meminta dalam satu prompt

Prompt terlalu besar membuat hasil sulit dicek.

Lebih baik pecah:

  • buat model dulu
  • buat UI dulu
  • tambah state
  • tambah storage
  • tambah Firebase
  • tambah rules

Tidak menjalankan kode

Kode yang terlihat benar belum tentu berjalan.

Selalu jalankan:

flutter run

Untuk cek static analysis:

flutter analyze

Untuk format:

dart format .

Tidak memahami error

Jangan hanya minta AI memperbaiki error. Minta juga penjelasan.

Prompt:

Jelaskan penyebab error ini dan kenapa solusi ini memperbaikinya.

Semua kode digabung di satu file

Untuk belajar awal boleh. Tapi setelah fitur mulai besar, pisahkan:

  • model
  • repository
  • page
  • widget
  • state

Tidak menyimpan dokumentasi

Setiap selesai fitur, tulis catatan:

  • fitur apa yang dibuat
  • error apa yang muncul
  • solusi apa yang dipakai
  • file apa yang diubah
  • konsep apa yang dipelajari

Ini membuat proses belajar tidak hilang begitu saja.

20. Format Catatan Belajar Vibe Coding

Setiap kali selesai membuat fitur, simpan catatan seperti ini:

# Fitur: Tambah Task

## Tujuan
User bisa menambahkan task dari input.

## File yang Diubah
- lib/models/task.dart
- lib/pages/task_page.dart

## Konsep yang Dipelajari
- TextEditingController
- setState
- ListView

## Error yang Muncul
- Task tidak muncul karena lupa setState

## Solusi
Masukkan perubahan list ke dalam setState.

## Checklist
- input kosong tidak ditambahkan
- task muncul setelah tombol ditekan
- input kosong setelah tambah

Catatan seperti ini cocok dimasukkan ke dokumentasi pribadi.

21. Roadmap Belajar Flutter dengan Vibe Coding

Urutan belajar yang disarankan:

1. Flutter dasar
2. Layout dan widget
3. StatefulWidget dan setState
4. Form dan validasi
5. List dan CRUD lokal
6. Local storage
7. State management
8. Repository pattern
9. Firebase Auth
10. Firestore CRUD
11. Security Rules
12. Project mobile lengkap
13. Testing
14. Deployment

Cara pakainya:

  • pelajari satu konsep
  • minta AI buat contoh kecil
  • jalankan contoh
  • ubah sedikit
  • catat hasil belajar
  • lanjut ke konsep berikutnya

22. Mini Project untuk Latihan Vibe Coding

Berikut project yang cocok:

Project 1: Habit Tracker

Fitur:

  • tambah habit
  • tandai selesai hari ini
  • simpan lokal
  • tampilkan progress mingguan

Konsep:

  • list
  • date
  • local storage
  • UI card

Project 2: Expense Tracker

Fitur:

  • tambah pemasukan
  • tambah pengeluaran
  • kategori transaksi
  • total saldo
  • filter bulan

Konsep:

  • model
  • form
  • list
  • filter
  • chart sederhana

Project 3: Study Notes App

Fitur:

  • tambah catatan
  • edit catatan
  • search catatan
  • kategori
  • simpan lokal atau Firestore

Konsep:

  • CRUD
  • search
  • local storage
  • repository

Project 4: Task Manager Online

Fitur:

  • login
  • register
  • CRUD task
  • data per user
  • Security Rules

Konsep:

  • Firebase Auth
  • Firestore
  • StreamBuilder
  • repository pattern
  • security

23. Prompt Harian untuk Belajar

Gunakan prompt ini saat mulai belajar:

Hari ini saya ingin belajar Flutter selama 1 jam.
Topik saya: [topik].

Buatkan:
- penjelasan singkat
- contoh kode kecil
- latihan 30 menit
- challenge tambahan
- checklist pemahaman

Prompt setelah selesai:

Saya sudah menyelesaikan latihan ini.
Tolong bantu review:
- apakah kode saya sudah benar?
- apa yang bisa dirapikan?
- konsep apa yang harus saya pahami dari latihan ini?
- latihan apa yang cocok berikutnya?

24. Checklist Vibe Coding yang Sehat

Sebelum menganggap fitur selesai, cek:

  • kode bisa dijalankan
  • tidak ada error besar di console
  • flutter analyze aman atau error dipahami
  • UI bisa dipakai di layar kecil
  • input kosong ditangani
  • loading state ada jika proses async
  • error state ada
  • data tersimpan sesuai harapan
  • kode sudah dibaca ulang
  • bagian sulit sudah dicatat
  • dokumentasi singkat dibuat

Kalau checklist ini dijalankan, vibe coding menjadi alat belajar yang sangat kuat.

25. Kesimpulan

Vibe coding bisa mempercepat belajar Flutter Mobile, tetapi tetap perlu diarahkan dengan baik.

Poin penting:

  • beri prompt yang jelas
  • mulai dari fitur kecil
  • jalankan kode
  • baca dan pahami hasil
  • minta penjelasan jika bingung
  • refactor setelah fitur berjalan
  • catat error dan solusi
  • gunakan AI sebagai partner belajar, bukan pengganti pemahaman

Dengan cara ini, kamu bisa membangun aplikasi lebih cepat sambil tetap naik level sebagai Flutter developer.

26. Selanjutnya

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

Di materi itu kita akan memakai workflow vibe coding secara langsung untuk membuat mini project dari ide, prompt, implementasi, debugging, sampai checklist selesai.