Penyiapan

Topik ini menyiapkan lingkungan kerja Flutter dari nol sampai aplikasi pertama tampil di layar. Urutannya: memasang Flutter SDK, memasang plugin editor, memeriksa hasil pemasangan dengan flutter doctor, membuat proyek pertama, lalu menjalankannya pada emulator atau perangkat. Setelah semua langkah selesai, alat untuk menulis dan menjalankan kode Flutter sudah lengkap.

Memasang Flutter SDK#

Flutter SDK adalah satu paket yang memuat framework, engine, alat baris perintah flutter dan dart, serta templat proyek. SDK diunduh dari halaman instalasi dokumentasi resmi Flutter, dan bentuk arsipnya berbeda untuk tiap sistem operasi. Tidak ada pemasang (installer) yang wajib digunakan, karena memasang Flutter berarti mengekstrak arsipnya lalu mendaftarkan jalurnya.

Langkah intinya sama untuk ketiga sistem operasi:

1. Unduh arsip SDK dari halaman instalasi sesuai sistem operasi dan arsitektur prosesor.
2. Ekstrak arsip ke lokasi tetap yang tidak memerlukan hak akses khusus, misalnya direktori beranda pengguna, dan hindari nama direktori yang memuat spasi.
3. Tambahkan direktori bin milik SDK ke variabel lingkungan PATH.
4. Buka terminal baru, lalu periksa pemasangan dengan flutter --version.

Pada Linux dan macOS, pendaftaran PATH dilakukan pada berkas konfigurasi shell:

# tidak-dijalankan
# mendaftarkan Flutter SDK ke PATH pada Linux atau macOS (sesuaikan lokasi ekstraksi)
export PATH="$HOME/flutter/bin:$PATH"
flutter --version

Pada Windows, variabel PATH diatur dari dialog pengaturan variabel lingkungan dengan menambahkan jalur flutter\bin ke variabel Path milik pengguna, kemudian terminal dibuka ulang. Direktori SDK sebaiknya tidak diletakkan di dalam C:\Program Files karena lokasi tersebut menuntut hak akses administrator pada setiap proses yang menulis ke dalamnya.

Memasang plugin editor#

Dua editor yang resmi didukung Flutter adalah VS Code dan Android Studio. Keduanya memerlukan plugin Flutter untuk mendapatkan penyorotan sintaks Dart, pelengkapan kode, debugger, serta templat widget yang dapat disisipkan langsung. Plugin bersifat melengkapi SDK, bukan menggantikannya, sehingga SDK tetap harus terpasang terlebih dahulu. Apabila Android Studio sudah dipasang untuk keperluan Android SDK, editor tersebut dapat digunakan sekaligus tanpa memasang VS Code.

Pada VS Code, ekstensi Flutter dipasang dari panel Extensions dengan mencari “Flutter”, atau dari terminal dengan perintah berikut. Ekstensi ini otomatis menyertakan ekstensi Dart.

# tidak-dijalankan
# memasang ekstensi Flutter pada VS Code dari terminal (alternatif panel Extensions)
code --install-extension dart-code.flutter

Pada Android Studio, plugin dengan nama yang sama dipasang melalui menu Settings lalu Plugins. Kedua editor perlu diarahkan ke direktori Flutter SDK saat pertama kali digunakan, dan lokasinya mengikuti tempat arsip SDK diekstrak pada bagian pemasangan SDK. Kesiapan pemasangan plugin ini dapat diperiksa dengan flutter doctor, karena bagian editor pada laporannya mendeteksi editor yang terpasang beserta status pluginnya.

Memeriksa kesiapan dengan flutter doctor#

Perintah flutter doctor memeriksa lingkungan pengembangan dan menampilkan laporan kesiapan per bagian. Bagian yang lazim diperiksa antara lain Flutter itu sendiri, Android toolchain, Chrome dan perangkat web, editor yang terpasang, serta perangkat atau emulator yang tersambung. Setiap bagian dilaporkan dalam salah satu dari tiga keadaan, yaitu siap, siap dengan catatan, atau belum siap, dan setiap catatan disertai saran perbaikannya.

Laporan yang belum seluruhnya berstatus siap bukan berarti pemasangan gagal. Bagian yang perlu siap bergantung pada target pengembangan: membangun aplikasi Android menuntut bagian Android toolchain dan perangkat, sedangkan bagian web hanya diperlukan apabila aplikasi ditujukan untuk browser. Bagian editor boleh dilewati apabila editor yang digunakan bukan VS Code atau Android Studio. Opsi -v menampilkan versi dan jalur secara rinci, dan berguna saat mencari penyebab masalah yang tidak tampak pada laporan ringkasnya.

Jalankan ulang flutter doctor setelah setiap perbaikan untuk memastikan status bagian yang bersangkutan telah berubah. Perbaikan pada satu bagian tidak memengaruhi bagian lain, sehingga laporan dapat dituntaskan bertahap. Pada tahap awal ini, cukup memastikan bagian Flutter dan bagian target pertama, misalnya Android toolchain, berstatus siap.

Membuat proyek pertama#

Proyek Flutter baru dibuat dengan perintah flutter create diikuti nama proyeknya. Nama proyek mengikuti konvensi penamaan package Dart, yaitu huruf kecil, angka, dan garis bawah, sehingga aplikasi_catatan sah sedangkan Aplikasi Catatan tidak. Perintah berikut membuat proyek bernama aplikasi_catatan lalu masuk ke direktorinya:

# tidak-dijalankan
# membuat proyek pertama, lalu masuk ke direktori proyeknya
flutter create aplikasi_catatan
cd aplikasi_catatan

Hasilnya adalah proyek lengkap yang dapat langsung dijalankan. Berkas yang paling sering disunting adalah lib/main.dart, titik masuk aplikasi yang memuat kode contoh berupa aplikasi penghitung, dan pubspec.yaml, manifes proyek yang memuat nama aplikasi, dependensi package, dan daftar aset. Direktori android/ dan ios/ memuat proyek host tiap platform untuk konfigurasi seperti izin dan ikon, sedangkan web/ memuat proyek host untuk target browser. Platform lain yang didukung sistem operasi host ikut dibuat sebagai direktori proyek host masing-masing. Nama proyek yang terlanjur dibuat sulit diubah karena menyentuh beberapa berkas sekaligus, sehingga nama yang tepat sebaiknya ditentukan sejak perintah flutter create.

Menjalankan aplikasi pertama kali#

Target tempat aplikasi dijalankan diperiksa dengan flutter devices. Emulator Android dibuat terlebih dahulu melalui Device Manager di Android Studio, lalu dinyalakan dari terminal dengan flutter emulators --launch diikuti pengenal emulatornya. Perangkat fisik Android cukup disambungkan melalui USB dengan USB debugging diaktifkan, sedangkan Chrome otomatis terdeteksi apabila target yang dipilih adalah web.

# tidak-dijalankan
# menampilkan daftar emulator yang pernah dibuat, lalu menyalakan salah satunya
flutter emulators
flutter emulators --launch <id_emulator>

Aplikasi dijalankan dari dalam direktori proyek dengan flutter run. Apabila target yang tersedia lebih dari satu, flutter run menampilkan daftar pilihannya, sedangkan apabila hanya ada satu, target itu langsung digunakan.

# tidak-dijalankan
# menjalankan aplikasi pada target yang tersedia
flutter devices
flutter run

Build pertama untuk Android berlangsung paling lama karena Gradle mengunduh komponen yang belum ada di komputer, dan proses ini hanya terjadi sekali. Setelah prosesnya selesai, aplikasi contoh tampil di layar, yaitu aplikasi penghitung yang menambah angka setiap tombol ditekan. Saat aplikasi masih berjalan, perubahan kecil pada kode dapat dilihat langsung melalui hot reload tanpa memulai ulang aplikasi dari awal. Pada sesi flutter run yang masih terbuka, huruf r di terminal memicu hot reload, sedangkan huruf q menghentikan aplikasi.

Kesalahan umum#

Beberapa kegagalan muncul paling sering saat penyiapan pertama:

• Perintah flutter tidak ditemukan (command not found). Penyebabnya adalah variabel PATH yang belum memuat direktori bin SDK, atau terminal yang belum dibuka ulang setelah PATH diubah. Perbaikannya adalah melengkapi PATH sesuai bagian pemasangan, lalu memeriksa ulang dengan flutter --version pada terminal baru.
• Bagian Android toolchain belum siap. Penyebabnya adalah komponen Command-line Tools yang belum terpasang atau lisensinya yang belum disetujui. Perbaikannya mengikuti langkah yang dijelaskan pada bagian flutter doctor, kemudian pemeriksaan dijalankan ulang.
• Direktori SDK diletakkan di lokasi yang menuntut hak akses khusus atau memuat spasi. Sebagian proses build gagal membaca atau menulis di lokasi semacam itu. Perbaikannya adalah memindahkan SDK ke direktori beranda pengguna, lalu memperbarui nilai PATH.
• Build pertama terasa berhenti lama. Keadaan ini umumnya bukan error, melainkan unduhan komponen Gradle yang terjadi pada build pertama. Perbaikannya adalah membiarkan proses berjalan sampai selesai, karena build berikutnya menggunakan komponen yang sudah tersimpan.

Ringkasan#

• Flutter SDK dipasang dengan mengunduh arsip resmi, mengekstraknya ke lokasi tetap, lalu mendaftarkan direktori bin ke PATH.
• Plugin Flutter pada VS Code atau Android Studio menyediakan penyorotan, pelengkapan, dan debugger untuk kode Dart.
• flutter doctor melaporkan kesiapan lingkungan per bagian, dan bagian Android toolchain paling sering memerlukan penyetelan komponen serta lisensi.
• flutter create aplikasi_catatan menghasilkan proyek lengkap dengan titik masuk lib/main.dart dan manifes pubspec.yaml, sedangkan flutter run menjalankannya pada emulator atau perangkat, dengan build pertama sebagai proses yang paling lama.

Referensi#

• Install and set up Flutter — Google — Panduan resmi instalasi Flutter SDK per sistem operasi beserta prasyaratnya.
• Flutter documentation — Google — Dokumentasi utama alat CLI Flutter, termasuk flutter doctor, flutter create, dan flutter run.
• Visual Studio Code — Google — Panduan resmi pemasangan dan penggunaan ekstensi Flutter pada VS Code.