Panduan Lengkap Setup Flutter & VS Code: Dari Nol Sampai Siap Ngoding

Pada artikel sebelumnya, kita sudah membahas apa itu Flutter, keunggulannya, dan konsep dasar Stateless vs Stateful Widget. Sekarang, saatnya mengubah teori menjadi praktik.

Menyiapkan development environment sering kali menjadi bagian yang paling membingungkan bagi pemula. Mulai dari urusan PATH environment, Android SDK, hingga lisensi sering menimbulkan error jika tidak dilakukan secara runut.

Di artikel ini, kita akan membahas langkah demi langkah setup Flutter SDK, konfigurasi VS Code, hingga memastikan status environment Anda 100% hijau menggunakan Flutter Doctor.

Prasyarat Awal (Prerequisites)

Sebelum mulai mengunduh Flutter SDK, pastikan sistem Anda sudah memiliki dependensi dasar:

• Git: Wajib terpasang untuk mengelola versi dan dependensi Flutter.
• Koneksi Internet Stabil: Dibutuhkan untuk mengunduh SDK dan dependensi awal tools Android.

Langkah 1: Unduh dan Ekstrak Flutter SDK

Unduh bundle resmi sesuai sistem operasi. Buka situs resmi flutter.dev dan unduh package SDK versi stabil (Stable channel) sesuai OS Anda (Windows, macOS, atau Linux).

Hindari folder dengan hak akses terbatas seperti Program Files di Windows. Ekstrak file zip ke direktori pengembangan Anda:

• Windows: Misalnya di C:\src\flutter (jangan taruh di C:\Program Files\).
• macOS/Linux: Misalnya di ~/development/flutter.

Tambahkan subfolder bin dari folder Flutter ke variabel PATH sistem Anda agar perintah flutter bisa dipanggil di terminal mana saja:

Windows: Buka Edit the system environment variables → Environment Variables → Edit Path pada User Variables → Tambahkan path C:\src\flutter\bin.

macOS/Linux (Zsh/Bash): Tambahkan baris berikut ke file ~/.zshrc atau ~/.bashrc:

Setelah itu, muat ulang konfigurasi terminal dengan perintah source ~/.zshrc.

Langkah 2: Setup Android Studio & Android Toolchain

Meskipun kita akan menulis kode menggunakan VS Code, kita tetap membutuhkan Android Studio untuk menyediakan Android SDK, Platform-Tools, dan Emulator.

1. Unduh dan pasang Android Studio dari situs resmi pengembang Android.
2. Buka Android Studio, masuk ke SDK Manager (menu More Actions atau Settings).
3. Di tab SDK Tools, pastikan centang opsi: Android SDK Build-Tools, Android SDK Command-line Tools (latest), Android Emulator, Android SDK Platform-Tools.
4. Klik Apply lalu tunggu proses instalasi hingga selesai.

Langkah 3: Konfigurasi Visual Studio Code

VS Code adalah editor yang ringan, cepat, dan memiliki ekosistem ekstensi Flutter yang sangat matang.

1. Buka VS Code.
2. Masuk ke menu Extensions (Ctrl+Shift+X di Windows/Linux atau Cmd+Shift+X di macOS).
3. Cari dan instal dua ekstensi resmi ini: Flutter (oleh Dart Code) — otomatis akan menginstal ekstensi Dart.
4. (Opsional tapi sangat membantu) Instal ekstensi pendukung produktivitas: Error Lens (menampilkan error langsung inline di baris kode), Material Icon Theme (ikon folder dan file yang rapi).

Langkah 4: Validasi dengan Flutter Doctor

Ini adalah langkah paling krusial untuk memastikan semua konfigurasi terhubung dengan benar. Buka terminal baru di VS Code atau terminal sistem Anda, lalu jalankan:

Jika ini instalasi pertama, Anda kemungkinan akan melihat tanda centang peringatan pada Android toolchain (licenses). Atasi dengan menjalankan perintah:

Tekan y (yes) untuk menyetujui seluruh ketentuan lisensi yang muncul.

Jalankan flutter doctor sekali lagi. Pastikan semua komponen utama (Flutter, Android toolchain, VS Code, dan Connected device) bertanda centang hijau [✓].

Langkah 5: Menjalankan Emulator atau Device Fisik

Untuk melihat hasil aplikasi, Anda memiliki beberapa pilihan:

• Android Emulator: Di VS Code, tekan Ctrl+Shift+P (atau Cmd+Shift+P), ketik Flutter: Launch Emulator, lalu pilih emulator yang sudah Anda buat di Android Studio.
• HP Fisik Android: Aktifkan Developer Options dan USB Debugging di HP Anda, lalu hubungkan ke laptop via kabel data.
• macOS (iOS Simulator): Bagi pengguna Mac dengan Xcode terpasang, Anda cukup menjalankan perintah open -a Simulator di terminal.

Kesimpulan

Selamat! Lingkungan pengembangan Flutter Anda sekarang sudah siap 100%. Dengan pondasi SDK, Android Toolchain, dan VS Code yang sudah terverifikasi hijau oleh Flutter Doctor, proses ngoding ke depan akan jauh lebih mulus tanpa kendala konfigurasi.

Di artikel berikutnya (Part 3), kita akan membuat project pertama, membedah struktur folder Flutter, dan memahami isi file main.dart.