Muhammad Farhan Al Ghifari - 24060123140186 - Flutter

Tutorial Lengkap: Instalasi Flutter & Membuat Project "Hello World"

Halo semuanya! 👋

Masih semangat belajar mobile development? Setelah kemarin kita mencoba Android Studio (Kotlin) dan React Native, hari ini kita akan melengkapi koleksi skill kita dengan berkenalan dengan Flutter.

Flutter adalah framework buatan Google yang menggunakan bahasa Dart. Kelebihannya? Performa sangat cepat, UI-nya cantik, dan satu kodingan bisa jalan di Android, iOS, Web, bahkan Desktop!

Karena kita sudah menginstall Android Studio dan Emulator di tutorial sebelumnya, pekerjaan kita hari ini jadi 50% lebih ringan. Yuk, langsung gas! 🚀 

Langkah 1: Download Flutter SDK

1. Buka browser dan kunjungi: docs.flutter.dev/get-started.
2. Klik menu Custom Setup.
3. Pilih kotak Install manually (di sebelah kanan).

Langkah 2: Pilih Sistem Operasi

Anda akan diarahkan ke halaman "Install Flutter manually". Di sini Google bertanya sistem operasi apa yang Anda gunakan.

• Klik tombol Windows (logo kotak biru).

Langkah 3: Download SDK

Setelah memilih Windows, barulah Anda akan melihat tombol download yang sebenarnya.

1. Cari tombol biru bertuliskan Download flutter_windows_3.x.x-stable.zip.

2. Klik dan tunggu proses download selesai (sekitar 1GB).

Pilih platform Windows untuk melanjutkan.

Langkah 4: Ekstrak File (Wajib Teliti!)

Setelah file zip terdownload:

1. Buka Drive C: di laptop Anda.

2. Buat folder baru bernama src. (Jadi C:\src).

3. Ekstrak isi file zip tadi ke dalam folder tersebut.

4. Pastikan hasil akhirnya adalah C:\src\flutter.

Hindari mengekstrak ke "Program Files" karena Windows sering memblokir izin akses di folder itu.

Langkah 5: Edit Environment Variables

1. Klik tombol Start Windows, ketik "env".

2. Pilih menu Edit the system environment variables.

3. Di jendela kecil yang muncul, klik tombol Environment Variables di kanan bawah.

Langkah 6: Masukkan Path

1. Di kolom bagian atas (User variables), cari tulisan Path, klik satu kali, lalu klik tombol Edit.

2. Klik tombol New di sebelah kanan.

3. Ketik alamat folder bin Flutter tadi: C:\src\flutter\bin

4. Klik OK, OK, dan OK sampai semua jendela tertutup.

Langkah 7: Run Flutter Doctor

1. Buka Terminal baru (PowerShell atau CMD).

2. Ketik: flutter doctor lalu Enter.

Analisis Hasil

Lihat gambar di bawah ini. Jika hasilnya seperti milik saya, berarti SUKSES.

• Flutter & Android Toolchain: Centang hijau. Artinya siap untuk bikin aplikasi HP.
• Visual Studio (Windows): Silang merah. Abaikan saja. Ini hanya butuh kalau kita mau bikin aplikasi Desktop Windows (.exe). Untuk mobile app, error ini tidak berpengaruh.

Langkah 8: Setup VS Code

Kita butuh "asisten" di dalam editor kita.

1. Buka VS Code.

2. Ke menu Extensions (Sidebar kiri).

3. Cari dan install ekstensi Flutter.

Langkah 9: Membuat Project HelloWorld Pertama

Saatnya coding!

1. Buka Terminal di VS Code (Ctrl + J).

2. Arahkan ke folder dokumen Anda.

3. Ketik perintah: flutter create hello_world

4. Tunggu sampai selesai, lalu buka foldernya: cd hello_world dan code .

Bagian 10: Menjalankan Aplikasi (Via Terminal)

Kita akan menyalakan emulator langsung dari VS Code tanpa perlu membuka Android Studio. Caranya sangat praktis!

Langkah 1: Pilih & Nyalakan Emulator

1. Lihat ke pojok kanan bawah jendela VS Code. Klik tulisan "Windows" atau "No Device".

2. Menu pilihan device akan muncul di bagian atas.

3. Cari bagian Offline Emulators, lalu pilih Start Pixel 7 mobile emulator.

Catatan: Jangan bingung dengan kata "Offline". Itu hanya berarti emulatornya sedang mati. Saat Anda klik, VS Code akan otomatis menyalakannya untuk Anda.

Langkah 11: Tunggu Emulator Booting

Setelah diklik, VS Code akan memproses perintah di latar belakang.

• Tunggu sebentar sampai jendela HP Pixel 7 muncul di layar desktop dan masuk ke menu utama.

• Jika ini pertama kali dinyalakan, prosesnya mungkin butuh waktu 1-2 menit.

Langkah 12: Jalankan Perintah Run

Setelah HP virtual menyala dan siap:

1. Buka Terminal di VS Code (Tekan Ctrl + J).

2. Ketik perintah berikut lalu tekan Enter: flutter run

3. Tunggu sampai muncul tulisan berwarna hijau di terminal dan aplikasi terbuka otomatis di layar HP virtual.

Selesai! Project HelloWorld Anda sekarang sudah tampil di layar Emulator. Silahkan update kode yang ada untuk hasil project yang lebih baik.

Posted by Muhammad Farhan Al Ghifari, Informatics Students at Diponegoro University