Setup Flutter Development Environment untuk Pemula

Setelah mempelajari dasar pemrograman dan memahami bahasa Dart, langkah berikutnya dalam roadmap belajar Flutter dari nol sampai siap kerja adalah menyiapkan development environment.

Pada tahap ini, Anda akan mulai beralih dari sekadar belajar konsep menjadi menjalankan Flutter secara langsung di komputer.

Development environment Flutter terdiri dari beberapa komponen penting, seperti Flutter SDK, Dart SDK, code editor atau IDE, Android tooling jika ingin membuat aplikasi Android, serta device atau emulator untuk menjalankan aplikasi.

Kabar baiknya, proses setup Flutter sekarang semakin sederhana. Flutter menyediakan jalur instalasi cepat menggunakan VS Code, sementara pengguna yang membutuhkan konfigurasi lebih spesifik dapat melakukan instalasi secara manual. Dokumentasi resmi Flutter juga menyarankan melakukan validasi instalasi menggunakan flutter doctor.

Dalam artikel ini, kita akan membahas cara setup Flutter development environment untuk pemula, terutama pada komputer Windows, sekaligus memahami fungsi setiap komponen agar Anda tidak sekadar mengikuti tutorial instalasi.

Apa Itu Flutter Development Environment?

Flutter development environment adalah kumpulan software dan konfigurasi yang diperlukan untuk mengembangkan, menjalankan, menguji, dan melakukan debugging aplikasi Flutter.

Setup Flutter development environment dilihat secara sederhana adalah ketika Anda dapat membayangkan environment sebagai “tempat kerja” Flutter.

Komponen utamanya meliputi:

Komputer
   │
   ├── Flutter SDK
   │      └── Dart SDK
   │
   ├── Code Editor / IDE
   │      └── VS Code / Android Studio
   │
   ├── Platform Tools
   │      └── Android SDK
   │
   └── Target Device
          ├── Android Emulator
          ├── Android Phone
          └── Web Browser

Tidak semua komponen harus dipasang sekaligus.

Flutter saat ini menyediakan berbagai target platform, termasuk Android, iOS, web, Windows, macOS, dan Linux. Dokumentasi resminya bahkan merekomendasikan pemula mencoba target web terlebih dahulu karena tidak membutuhkan konfigurasi tambahan sebanyak target mobile.

Namun, jika tujuan Anda adalah menjadi Flutter developer yang membuat aplikasi Android, Android tooling tetap menjadi bagian penting dari environment.

Apa Saja yang Perlu Disiapkan?

Sebelum mulai melakukan instalasi Flutter, siapkan beberapa komponen berikut:

1. Komputer atau laptop.
2. Flutter SDK.
3. Git.
4. Code editor atau IDE.
5. Android Studio jika menargetkan Android.
6. Android SDK.
7. Android Emulator atau smartphone Android.
8. Browser jika ingin mencoba Flutter Web.
9. Koneksi internet yang cukup stabil.

Untuk pemula, kombinasi berikut sudah cukup:

Flutter SDK + VS Code + Android Studio + Android SDK + Android Emulator

VS Code digunakan sebagai tempat menulis kode, sedangkan Android Studio dapat digunakan untuk menyediakan Android tooling dan emulator.

Sistem Operasi yang Didukung Flutter

Flutter dapat digunakan pada beberapa sistem operasi pengembangan.

Di antaranya:

• Windows
• macOS
• Linux
• ChromeOS

Namun, target platform memiliki persyaratan berbeda.

Contohnya, pengembangan iOS membutuhkan macOS, sedangkan pengembangan Windows membutuhkan Windows. Dokumentasi Flutter juga menyediakan setup khusus untuk masing-masing target platform.

Untuk tutorial ini, pembahasan utama menggunakan Windows karena merupakan salah satu lingkungan yang paling umum digunakan pemula.

Langkah 1 — Install Flutter SDK

Komponen paling penting adalah Flutter SDK.

Flutter SDK berisi berbagai tool yang dibutuhkan untuk membuat dan menjalankan aplikasi Flutter. Selain Flutter, instalasi Flutter SDK juga menyediakan Dart yang dibutuhkan untuk menulis kode Flutter.

Ada dua pendekatan utama untuk memasang Flutter:

• menggunakan VS Code sebagai quick setup,
• melakukan instalasi manual.

Untuk pemula, jalur VS Code dapat menjadi pilihan praktis.

Dokumentasi resmi Flutter saat ini menyediakan quick start menggunakan VS Code atau editor berbasis Code OSS.

Langkah 2 — Install VS Code

Visual Studio Code merupakan code editor yang ringan dan sangat populer untuk pengembangan Flutter.

VS Code digunakan untuk:

• menulis kode Dart,
• menulis kode Flutter,
• menjalankan project,
• debugging,
• menggunakan terminal,
• melihat error,
• melakukan refactoring,
• dan mengelola project.

Setelah VS Code terpasang, Anda dapat memasang dukungan Flutter melalui extension Flutter.

Dokumentasi Flutter menyediakan alur setup khusus melalui VS Code, termasuk proses mendapatkan Flutter SDK dan menambahkannya ke PATH.

Langkah 3 — Install Flutter Extension

Buka VS Code. Kemudian buka bagian Extensions.

Cari:

Flutter

Pasang extension Flutter.

Extension ini memberikan dukungan seperti:

• syntax highlighting,
• autocomplete,
• debugging,
• Flutter commands,
• widget assistance,
• hot reload,
• integrasi dengan Flutter SDK.

Karena Flutter menggunakan Dart, dukungan Dart juga akan tersedia melalui ekosistem extension Flutter. Setelah instalasi selesai, restart VS Code jika diperlukan.

Langkah 4 — Flutter SDK dan PATH

Agar perintah Flutter dapat digunakan dari terminal, Flutter SDK harus tersedia melalui environment variable PATH.

Contohnya, jika Flutter berada di:

C:\src\flutter

maka folder yang perlu tersedia pada PATH adalah:

C:\src\flutter\bin

PATH memungkinkan Anda menjalankan:

flutter

dari berbagai terminal tanpa harus mengetik lokasi lengkap Flutter SDK.

Dokumentasi resmi Flutter menjelaskan bahwa penambahan direktori bin Flutter ke PATH memungkinkan penggunaan command-line tools seperti flutter dan dart.

Mengapa Jangan Menaruh Flutter di Folder yang Terlindungi?

Pada Windows, sebaiknya Flutter SDK tidak ditempatkan di folder yang membutuhkan hak administrator untuk melakukan perubahan.

Misalnya, folder seperti:

C:\Program Files\

dapat menyebabkan masalah permission tertentu.

Dokumentasi Flutter menyarankan memindahkan SDK ke lokasi yang dapat ditulis oleh user, misalnya:

C:\src\flutter

jika muncul masalah karena SDK berada di protected folder.

Struktur seperti ini cukup sederhana:

C:\
└── src\
    └── flutter\
        ├── bin\
        ├── packages\
        └── ...

Langkah 5 — Cek Instalasi Flutter

Setelah Flutter SDK terpasang dan PATH dikonfigurasi, buka terminal baru.

Jalankan:

flutter --version

Jika instalasi berhasil, Flutter akan menampilkan informasi versi yang terpasang.

Anda juga dapat menjalankan:

dart --version

untuk memastikan Dart tersedia.

Jika command tidak dikenali, jangan langsung menginstal ulang semuanya. Periksa terlebih dahulu:

• lokasi Flutter SDK,
• PATH,
• terminal yang sedang digunakan,
• apakah terminal sudah dibuka ulang.

Langkah 6 — Jalankan flutter doctor

Ini adalah salah satu perintah paling penting dalam proses setup Flutter.

Jalankan:

flutter doctor

Atau untuk informasi lebih detail:

flutter doctor -v

flutter doctor akan memeriksa berbagai komponen development environment dan menunjukkan bagian mana yang sudah siap serta bagian mana yang masih perlu dikonfigurasi.

Contohnya, Anda mungkin melihat pemeriksaan terhadap:

[✓] Flutter
[✓] Android toolchain
[✓] Chrome
[✓] Visual Studio
[✓] Connected device

Jika ada tanda error atau warning, baca pesan yang ditampilkan.

Jangan langsung menganggap instalasi gagal. Sering kali flutter doctor justru memberikan petunjuk mengenai komponen apa yang belum disiapkan.

Dokumentasi Flutter menggunakan flutter doctor sebagai langkah validasi utama setelah instalasi.

Langkah 7 — Install Android Studio

Jika target Anda adalah membuat aplikasi Android menggunakan Flutter, Anda membutuhkan Android tooling. Salah satu cara yang umum adalah menggunakan Android Studio.

Android Studio menyediakan berbagai komponen yang dibutuhkan untuk Android development, termasuk:

• Android SDK,
• SDK tools,
• emulator,
• device manager,
• dan berbagai Android development tools.

Dokumentasi Flutter saat ini menyarankan menggunakan versi stable terbaru Android Studio untuk Android development.

Perlu diperhatikan:

Memasang Flutter plugin di Android Studio saja tidak cukup. Flutter SDK tetap harus terpasang dan tersedia melalui PATH agar command flutter dapat digunakan.

Langkah 8 — Install Android SDK

Setelah Android Studio terpasang, pastikan Android SDK tersedia.

Android SDK digunakan Flutter untuk melakukan proses development dan build aplikasi Android. Pada tahap ini, Anda tidak perlu memahami seluruh komponen Android SDK.

Yang perlu dipahami adalah:

Flutter
   ↓
Android Toolchain
   ↓
Android SDK
   ↓
Emulator / Physical Device

Jika Android toolchain belum lengkap, jalankan kembali:

flutter doctor

dan ikuti rekomendasi yang diberikan.

Langkah 9 — Android SDK Licenses

Pada beberapa setup, Anda mungkin perlu menerima Android SDK licenses.

Flutter menyediakan command:

flutter doctor --android-licenses

Ikuti instruksi yang muncul pada terminal. Setelah selesai, jalankan kembali:

flutter doctor

Tujuannya adalah memastikan Android toolchain sudah tidak memiliki masalah terkait license.

Langkah 10 — Membuat Android Emulator

Jika belum memiliki smartphone Android untuk testing, Anda dapat menggunakan Android Emulator. Android Studio menyediakan Device Manager untuk membuat virtual device.

Secara umum alurnya:

Android Studio
      ↓
Device Manager
      ↓
Create Virtual Device
      ↓
Pilih perangkat
      ↓
Pilih system image
      ↓
Create
      ↓
Start Emulator

Dokumentasi Flutter saat ini menjelaskan penggunaan Device Manager Android Studio untuk membuat emulator dan kemudian memverifikasi perangkat menggunakan flutter devices.

Apakah Harus Menggunakan Emulator?

Tidak.

Anda dapat menjalankan aplikasi Flutter menggunakan smartphone Android fisik. Bahkan untuk beberapa komputer dengan spesifikasi terbatas, smartphone fisik dapat menjadi pilihan yang lebih ringan dibandingkan emulator.

Jika menggunakan perangkat fisik, Anda perlu melakukan konfigurasi Android developer options dan USB debugging sesuai perangkat yang digunakan.

Setelah perangkat terhubung, cek:

flutter devices

Jika berhasil, Flutter akan mendeteksi perangkat tersebut.

Langkah 11 — Mengecek Device dengan flutter devices

Setelah emulator atau smartphone terhubung, jalankan:

flutter devices

Perintah tersebut digunakan untuk melihat device yang tersedia untuk Flutter.

Misalnya:

Chrome
Windows
Android Emulator

Jika Anda melihat setidaknya satu target yang dapat digunakan, Anda sudah semakin dekat untuk menjalankan aplikasi pertama.

Untuk Android, dokumentasi Flutter juga menggunakan kombinasi flutter emulators dan flutter devices sebagai bagian dari validasi setup.

Langkah 12 — Memahami flutter emulators

Untuk melihat emulator yang tersedia, gunakan:

flutter emulators

Sedangkan:

flutter devices

digunakan untuk melihat device yang sudah tersedia atau terhubung.

Perbedaannya secara sederhana:

Command	Fungsi
flutter doctor	Memeriksa environment
flutter emulators	Melihat emulator
flutter devices	Melihat device
flutter --version	Melihat versi Flutter
dart --version	Melihat versi Dart

Menghafalkan command ini akan membantu Anda ketika mulai bekerja dengan Flutter setiap hari.

Langkah 13 — Membuat Project Flutter Pertama

Setelah environment siap, saatnya membuat project. Buka terminal dan masuk ke folder tempat Anda ingin menyimpan project.

Kemudian jalankan:

flutter create my_app

Flutter akan membuat struktur project secara otomatis.

Nama project sebaiknya mengikuti pola:

lowercase_with_underscores

Contohnya:

my_app

Dokumentasi resmi Flutter menggunakan pola tersebut dalam pembuatan project baru.

Langkah 14 — Masuk ke Folder Project

Setelah project dibuat:

cd my_app

Kemudian Anda dapat membuka project tersebut di VS Code.

Jika VS Code sudah terintegrasi dengan terminal, Anda dapat menggunakan:

code .

Jika command tersebut belum tersedia, Anda juga dapat membuka VS Code secara manual kemudian memilih folder project.

Langkah 15 — Menjalankan Project Flutter

Pastikan emulator, smartphone, atau target device lainnya sudah tersedia.

Kemudian jalankan:

flutter run

Flutter akan mencoba menjalankan aplikasi pada device yang tersedia.

Jika terdapat beberapa device, Flutter dapat meminta Anda memilih target. Jika semuanya berhasil, Anda akan melihat aplikasi Flutter pertama Anda.

Pada tahap ini, Anda sudah berhasil melewati proses penting:

Flutter SDK
     ↓
Development Environment
     ↓
Flutter Project
     ↓
Device
     ↓
Flutter App

Apa Itu Hot Reload?

Salah satu fitur Flutter yang sangat membantu developer adalah Hot Reload.

Hot Reload memungkinkan perubahan kode tertentu ditampilkan dengan cepat pada aplikasi yang sedang berjalan tanpa harus selalu melakukan restart penuh.

Misalnya Anda mengubah:

Text('Hello Flutter')

menjadi:

Text('Hello World')

kemudian melakukan hot reload.

Perubahan dapat langsung terlihat pada aplikasi. Fitur ini membuat proses:

Coding
   ↓
Run
   ↓
Perbaiki
   ↓
Run lagi

menjadi jauh lebih cepat.

Langkah 16 — Mencoba Flutter Web

Jika Anda ingin mencoba Flutter tanpa langsung mengatur Android Emulator, Flutter Web dapat menjadi alternatif.

Dokumentasi resmi Flutter saat ini bahkan merekomendasikan web sebagai target awal jika Anda belum memiliki platform pilihan karena setup-nya relatif sederhana dan hanya membutuhkan browser yang sesuai.

Cek device:

flutter devices

Jika browser tersedia, Anda dapat menjalankan aplikasi pada browser tersebut.

Contohnya:

flutter run -d chrome

Dengan demikian, Anda dapat mulai belajar Flutter tanpa harus menyelesaikan konfigurasi emulator Android terlebih dahulu.

Troubleshooting Flutter Development Environment

Setup Flutter terkadang tidak langsung berhasil. Berikut beberapa masalah yang umum ditemui pemula.

1. flutter Tidak Dikenali

Jika muncul pesan seperti:

'flutter' is not recognized...

kemungkinan Flutter belum masuk PATH.

Periksa:

Flutter SDK
    ↓
bin

Pastikan folder bin Flutter sudah tersedia di PATH.

Setelah mengubah PATH, tutup dan buka kembali terminal serta restart VS Code agar perubahan environment diterapkan.

2. Flutter Doctor Menampilkan Error

Jalankan:

flutter doctor -v

Kemudian baca bagian yang ditandai error. Jangan memperbaiki semua komponen secara acak. Fokus pada pesan error yang ditampilkan.

Setelah memperbaiki masalah, jalankan kembali:

flutter doctor

3. Android Device Tidak Terdeteksi

Jika:

flutter devices

tidak menampilkan perangkat Android, periksa:

• emulator sudah berjalan,
• smartphone sudah terhubung,
• USB debugging sudah aktif jika menggunakan smartphone,
• Android SDK sudah terpasang,
• Android toolchain sudah dikonfigurasi.

Kemudian jalankan kembali:

flutter devices

4. Emulator Terasa Sangat Lambat

Emulator membutuhkan resource komputer yang cukup besar.

Jika terasa lambat:

• tutup aplikasi yang tidak diperlukan,
• gunakan emulator dengan konfigurasi yang lebih ringan,
• pastikan virtual machine acceleration tersedia,
• atau gunakan smartphone Android fisik.

Untuk pemula dengan laptop berspesifikasi terbatas, smartphone fisik sering menjadi alternatif praktis.

5. Flutter Terpasang di Folder yang Salah

Jika muncul peringatan bahwa Flutter SDK berada di protected folder, pindahkan SDK ke folder yang dapat ditulis user.

Contohnya:

C:\src\flutter

Dokumentasi Flutter secara khusus menyebut protected folder pada Windows sebagai salah satu sumber masalah instalasi.

Apakah Harus Menggunakan Android Studio?

Tidak selalu.

Ini merupakan hal penting bagi pemula. Jika tujuan Anda hanya belajar Flutter Web, Anda dapat menggunakan:

Flutter
+
VS Code
+
Browser

Namun jika ingin mengembangkan aplikasi Android, Android tooling tetap dibutuhkan.

Salah satu setup yang praktis adalah:

VS Code
   +
Flutter SDK
   +
Android Studio
   +
Android SDK
   +
Android Emulator

VS Code berfungsi sebagai editor utama, sementara Android Studio menyediakan tooling Android dan emulator.

VS Code vs Android Studio untuk Flutter

Keduanya dapat digunakan untuk pengembangan Flutter.

Fitur	VS Code	Android Studio
Code editor	✓	✓
Flutter support	✓	✓
Dart support	✓	✓
Android SDK	Tidak fokus	✓
Android Emulator	Tidak menjadi fokus utama	✓
Ringan	Relatif ringan	Lebih berat
Cocok untuk pemula	✓	✓
Debugging Flutter	✓	✓

Tidak ada keharusan menggunakan salah satu secara eksklusif. Banyak developer menggunakan VS Code untuk coding dan Android Studio untuk emulator serta Android tooling.

Setup Minimum untuk Belajar Flutter

Jika komputer Anda memiliki resource terbatas, jangan langsung memasang terlalu banyak software.

Untuk mulai belajar Flutter Web, setup minimal dapat berupa:

Flutter SDK
+
VS Code
+
Browser

Sedangkan untuk Android:

Flutter SDK
+
VS Code
+
Android Studio
+
Android SDK
+
Emulator / Smartphone

Mulailah dari kebutuhan yang benar-benar Anda perlukan.

Checklist Flutter Development Environment

Sebelum melanjutkan ke Level 4, pastikan Anda sudah menyelesaikan checklist berikut.

Flutter

• Flutter SDK terpasang.
• Flutter tersedia melalui PATH.
• flutter --version berjalan.
• dart --version berjalan.
• flutter doctor dapat dijalankan.

Editor

• VS Code terpasang.
• Flutter extension terpasang.
• Project Flutter dapat dibuka.

Android

• Android Studio terpasang jika menargetkan Android.
• Android SDK tersedia.
• Android licenses sudah dikonfigurasi.
• Emulator atau smartphone tersedia.

Device

• flutter devices mendeteksi target.
• flutter run berhasil.
• Aplikasi Flutter dapat tampil.

Project

• Project Flutter pertama berhasil dibuat.
• Anda memahami fungsi flutter create.
• Anda memahami fungsi flutter run.
• Anda pernah mencoba hot reload.

Jika sebagian besar checklist tersebut sudah terpenuhi, Anda sudah siap memasuki tahap berikutnya.

Command Flutter yang Perlu Diketahui Pemula

Berikut beberapa command yang akan sering Anda gunakan:

flutter --version

Untuk melihat versi Flutter.

flutter doctor

Untuk memeriksa development environment.

flutter doctor -v

Untuk informasi pemeriksaan yang lebih detail.

flutter devices

Untuk melihat device yang tersedia.

flutter emulators

Untuk melihat emulator.

flutter create my_app

Untuk membuat project Flutter baru.

cd my_app

Untuk masuk ke folder project.

flutter run

Untuk menjalankan aplikasi.

Command-command tersebut akan menjadi bagian dari workflow Anda ketika mulai mengembangkan aplikasi Flutter secara rutin.

Jangan Terlalu Fokus pada Instalasi

Sebagai pemula, setup environment memang terasa cukup rumit. Namun jangan menghabiskan terlalu banyak waktu untuk menghafalkan semua konfigurasi.

Tujuan utama Level 3 bukan menjadi ahli konfigurasi sistem.

Tujuannya adalah memastikan:

Anda memiliki environment yang dapat digunakan untuk membuat dan menjalankan aplikasi Flutter.

Setelah aplikasi pertama berhasil berjalan, fokus Anda seharusnya mulai bergeser ke pengembangan aplikasi.

Setelah Flutter berhasil dipasang dan project pertama berhasil dijalankan, tahap berikutnya adalah memahami struktur project Flutter.

Anda akan mulai menemukan folder dan file seperti:

my_app/
├── android/
├── ios/
├── lib/
├── test/
├── web/
├── pubspec.yaml
└── ...

Pemula sering merasa bingung melihat banyak folder tersebut.

Karena itu, Level 4 akan membahas fungsi masing-masing folder dan file, terutama:

• folder lib,
• main.dart,
• pubspec.yaml,
• folder test,
• folder platform,
• dependency,
• asset,
• dan struktur dasar project Flutter.

Pemahaman ini akan menjadi dasar sebelum mulai mempelajari widget dan membuat interface.

Roadmap Belajar Flutter Setelah Setup

Pada Level 2 Anda telah Belajar Bahasa Dart dari Nol: Panduan Lengkap untuk Pemula, kemudian setelah Level 3 selesai, perjalanan Anda akan berlanjut:

Level 0 - Memahami Flutter & Ekosistem
        ↓
Level 1 - Dasar Pemrograman
        ↓
Level 2 - Bahasa Dart
        ↓
Level 3 - Setup Flutter Development Environment
        ↓
Level 4 - Struktur Project Flutter
        ↓
Level 5 - Widget Flutter
        ↓
Level 6 - Responsive UI
        ↓
Level 7 - Navigation & State Management
        ↓
Level 8 - REST API
        ↓
Level 9 - Database
        ↓
Level 10 - Real Project
        ↓
...
        ↓
Siap Kerja sebagai Flutter Developer

Dengan mengikuti urutan tersebut, Anda tidak perlu melompat langsung ke materi tingkat lanjut.

Kesimpulan

Setup Flutter development environment merupakan tahap penting sebelum mulai membangun aplikasi menggunakan Flutter.

Komponen yang perlu dipahami meliputi Flutter SDK, Dart SDK, VS Code atau IDE, Android Studio dan Android SDK jika menargetkan Android, serta emulator atau perangkat fisik untuk testing.

Untuk memastikan environment sudah benar, biasakan menggunakan:

flutter doctor

Kemudian gunakan:

flutter devices

untuk memastikan Flutter dapat menemukan target device.

Setelah semuanya siap, buat project pertama menggunakan:

flutter create my_app

dan jalankan dengan:

flutter run

Jika aplikasi pertama Anda sudah berhasil berjalan, berarti Anda telah menyelesaikan salah satu milestone penting dalam perjalanan belajar Flutter.

Level berikutnya adalah Level 4 — Memahami Struktur Project Flutter, tempat Anda mulai mengenal file dan folder yang akan digunakan dalam hampir setiap project Flutter.