Tutorial Membuat Aplikasi Flutter Pertama (Hello World) Menggunakan VS Code

Setelah mencoba React Native, saya melanjutkan eksplorasi ke kerangka kerja multi-platform andalan Google, yaitu Flutter. Berbeda dengan percobaan sebelumnya yang menggunakan Android Studio, kali ini saya memilih Visual Studio Code (VS Code) sebagai editor utama karena lebih ringan dan fleksibel.

Berikut adalah langkah-langkah yang saya lakukan untuk membuat aplikasi Flutter pertama saya.

Setup & Pembuatan Project

Langkah pertama adalah memastikan ekstensi Flutter dan Dart sudah terinstal di VS Code. Setelah ekstensi siap, saya membuat proyek baru melalui Command Palette (Ctrl+Shift+P) dan memilih "Flutter: New Project".

Saya memberikan nama proyek ini flutterhelloworld. Selanjutnya, sistem meminta saya untuk menentukan lokasi folder penyimpanan proyek di dalam direktori lokal komputer.

Struktur Awal & Pemilihan Device

Setelah inisialisasi selesai, VS Code menampilkan struktur folder proyek Flutter. File utama yang menjadi pintu masuk aplikasi terletak di lib/main.dart.

Sebelum menjalankan aplikasi, saya perlu memilih target perangkat (Device). Saya menekan tombol selektor di bagian bawah kanan (atau melalui menu Run), dan memilih Chrome (web). Menggunakan browser sebagai emulator adalah pilihan efisien karena proses debugging menjadi jauh lebih cepat dan ringan dibandingkan menjalankan Emulator Android. Opsi ini bisa dibuka melalui ctrl + shift + p, lalu pilih menu Flutter: Select Device

Menjalankan Template Bawaan

Saya memulai proses debugging dengan menekan tombol F5 atau menu Run > Start Debugging. Flutter segera melakukan kompilasi kode Dart ke JavaScript (karena targetnya adalah Web). Hasilnya, browser Chrome terbuka otomatis dan menampilkan aplikasi Counter App (aplikasi penghitung) yang merupakan template standar Flutter. Aplikasi berjalan lancar di localhost.

Modifikasi Kode (Hello World)

Tujuan utama praktikum ini adalah membuat "Hello World". Oleh karena itu, saya kembali ke VS Code untuk mengedit file lib/main.dart.

Saya menghapus kode logika penghitung (Counter) dan menyederhanakan struktur Scaffold.

Judul AppBar: Saya ubah menjadi "Gibran's First Flutter App".

Body: Saya mengganti isinya menjadi widget Center yang membungkus Text('Hello World') agar teks muncul tepat di tengah layar.

Hasil Akhir

Berkat fitur Hot Reload (atau Hot Restart untuk Web), perubahan kode langsung terlihat di browser tanpa perlu build ulang dari nol.

Tampilan aplikasi kini berubah menjadi layar putih bersih dengan teks "Hello World" di tengah dan judul aplikasi yang sudah dikustomisasi sesuai nama saya.

Kesimpulan

Pengembangan Flutter menggunakan VS Code memberikan pengalaman yang sangat responsif. Dukungan eksekusi via Web (Chrome) sangat membantu mempercepat proses belajar tanpa harus terbebani oleh emulator yang berat. Kode Dart yang digunakan pun terasa terstruktur dan mudah dipahami.