Kenapa Modul Ini Penting?

Sebelum bisa bikin aplikasi, kamu butuh Flutter SDK (Software Development Kit) — kumpulan alat, library, dan compiler yang dibutuhkan untuk menulis dan menjalankan aplikasi Flutter — serta editor kode yang sudah dikonfigurasi dengan benar. Proses instalasi ini cuma dilakukan sekali, jadi ikuti pelan-pelan supaya nggak perlu ulang dari awal.

Kita akan install 3 hal utama:

• Flutter SDK
• Editor kode: Visual Studio Code (VS Code)
• Emulator/simulator untuk menjalankan aplikasi tanpa HP fisik

Instalasi di Windows

1. Download Flutter SDK

Buka docs.flutter.dev/get-started/install/windows, download file zip Flutter SDK versi terbaru. Ekstrak ke folder yang tidak butuh akses admin dan tidak mengandung spasi, misalnya C:\src\flutter. Jangan ekstrak ke C:\Program Files karena Flutter butuh menulis file di dalam foldernya sendiri.

2. Tambahkan Flutter ke PATH

PATH adalah daftar lokasi folder yang dikenali sistem operasi supaya perintah bisa dijalankan dari Command Prompt di mana saja.

1. Cari "Edit the system environment variables" di Start Menu
2. Klik "Environment Variables"
3. Di bagian "User variables", pilih "Path" → Edit → New
4. Tambahkan: C:\src\flutter\bin
5. Klik OK di semua jendela

3. Cek Instalasi

Buka Command Prompt baru (harus baru supaya PATH terbaca), lalu jalankan:

flutter doctor

flutter doctor adalah perintah bawaan Flutter yang mengecek apa saja yang masih kurang di sistemmu. Kalau ada tanda silang (✗), itu artinya ada komponen yang belum terinstall — biasanya Android Studio/Android SDK.

4. Install Android Studio (untuk Android SDK & Emulator)

Download di developer.android.com/studio. Saat instalasi, pastikan centang opsi "Android Virtual Device" supaya kamu bisa bikin emulator (HP virtual di komputer). Setelah install, buka Android Studio → More Actions → SDK Manager → pastikan "Android SDK Command-line Tools" tercentang.

Jalankan flutter doctor lagi sampai semua tanda centang hijau (kecuali baris soal Xcode/iOS yang memang tidak berlaku di Windows).

Instalasi di Mac

1. Download Flutter SDK

Buka docs.flutter.dev/get-started/install/macos, download SDK, lalu ekstrak ke folder, misalnya ~/development/flutter.

2. Tambahkan Flutter ke PATH

Buka Terminal, edit file konfigurasi shell (biasanya ~/.zshrc untuk Mac terbaru):

nano ~/.zshrc

Tambahkan baris ini di paling bawah:

export PATH="$PATH:$HOME/development/flutter/bin"

Simpan (Ctrl+O, Enter, Ctrl+X), lalu jalankan:

source ~/.zshrc

3. Cek Instalasi

flutter doctor

Sama seperti di Windows, perbaiki satu per satu masalah yang muncul sesuai instruksi di terminal.

4. Install Xcode (untuk simulator iOS)

Kalau mau menjalankan aplikasi di simulator iPhone, install Xcode dari App Store (ukurannya besar, bisa >10GB). Setelah install, jalankan:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

5. Install Android Studio (opsional tapi disarankan)

Sama seperti di Windows, ini dibutuhkan kalau kamu juga mau menjalankan aplikasi di emulator Android, bukan cuma simulator iOS.

Setup VS Code

Download VS Code di code.visualstudio.com. Setelah terinstall, buka VS Code lalu:

1. Klik ikon Extensions (kotak di sidebar kiri)
2. Cari "Flutter"
3. Install extension resmi dari Dart-Code
   (extension Dart akan otomatis ikut terinstall)

Extension ini menambahkan fitur seperti auto-complete kode, deteksi error, dan tombol "Run" langsung dari VS Code.

Membuat dan Menjalankan Emulator

Emulator adalah program yang mensimulasikan HP di komputer, jadi kamu bisa test aplikasi tanpa punya HP fisik yang terhubung.

1. Buka Android Studio → More Actions → Virtual Device Manager
2. Klik "Create Device"
3. Pilih model HP (misal Pixel 6), klik Next
4. Pilih system image (misal Android 14), klik Download jika belum ada
5. Klik Finish, lalu klik ikon Play (▶) untuk menyalakan emulator

Tunggu sampai emulator selesai booting (muncul tampilan home screen Android) — proses pertama kali biasanya agak lama.

Studi Kasus / Latihan

Sekarang giliran kamu praktik langsung:

1. Install Flutter SDK sesuai OS kamu (Windows atau Mac).
2. Jalankan flutter doctor di terminal/command prompt, screenshot hasilnya.
3. Perbaiki semua tanda silang (✗) yang muncul, ikuti saran perbaikan yang ditampilkan oleh flutter doctor sendiri di bawah setiap masalah.
4. Install VS Code + extension Flutter.
5. Buat 1 emulator Android, nyalakan, dan pastikan sampai muncul home screen-nya.

Target akhir latihan ini: ketika kamu jalankan flutter doctor, semua baris menunjukkan tanda centang hijau (✓) — minimal untuk platform yang kamu pilih (Android saja sudah cukup untuk lanjut ke modul berikutnya). Kalau masih ada masalah yang bikin stuck, catat pesan errornya persis seperti yang tertulis — itu akan jadi bekal penting buat troubleshooting di modul-modul selanjutnya.