Tutorial: Cara Instalasi Flutter di VS Code & Membuat Aplikasi "Hello World" Pertama

Flutter adalah UI toolkit dari Google yang memungkinkan kita membuat aplikasi menawan untuk mobile, web, dan desktop hanya dari satu basis kode (codebase). Jika sebelumnya kita membahas Android Native dan React Native, kali ini kita akan mencoba Flutter.

Ikuti panduan lengkap instalasi dan pembuatan proyek pertamanya di bawah ini.

1. Langkah 1: Persiapan & Instalasi Flutter SDK

Langkah pertama adalah mengunjungi dokumentasi resmi Flutter untuk mengunduh SDK yang sesuai dengan sistem operasi kamu (Windows). Pastikan kamu mengikuti panduan "Install Flutter using VS Code" agar terintegrasi dengan baik.

Setelah proses instalasi dan pengaturan Path selesai, kita perlu memverifikasi apakah Flutter sudah terinstal dengan benar. Buka Command Prompt (CMD) dan ketik perintah: flutter --version

Jika sukses, akan muncul detail versi Flutter dan Dart seperti gambar di bawah (versi 3.4.0).


2. Langkah 2: Setup Visual Studio Code

  1. Agar coding lebih mudah, kita wajib menginstal ekstensi resmi di VS Code.
  2. Buka menu Extensions di VS Code.
  3. Cari "Flutter".
  4. Klik Install. Ekstensi ini secara otomatis juga akan menginstal ekstensi Dart yang dibutuhkan.

3. Langkah 3: Membuat Project Baru

Kita bisa membuat proyek baru melalui terminal agar lebih cepat.

  1. Buka terminal atau CMD.
  2. Arahkan ke folder tujuan proyek.
  3. Ketik perintah berikut: flutter create helloworld
  4. Tunggu hingga muncul pesan "All done!".

4. Langkah 4: Menulis Kode Dart

Buka folder helloworld yang baru dibuat di VS Code. Buka file lib/main.dart. Kita akan mengganti kode bawaan dengan kode sederhana untuk menampilkan teks "Hello World!".

Salin kode berikut ke dalam main.dart:




5. Langkah 5: Menjalankan Emulator

Sebelum menjalankan aplikasi, kita perlu memilih device.

  1. Klik bagian pojok kanan bawah VS Code (atau tekan Ctrl+Shift+P dan ketik "Launch Emulator").
  2. Pilih emulator yang tersedia, misalnya Start Medium Phone.

6. Langkah 6: Run Aplikasi

Setelah emulator menyala, jalankan aplikasi dengan membuka terminal di VS Code dan mengetik: flutter run

Tunggu proses Gradle task 'assembleDebug' selesai. Proses awal ini mungkin memakan waktu beberapa menit.




7. Langkah 7: Hasil Akhir
Aplikasi akan terbuka di emulator Android. Sesuai kode yang kita buat, aplikasi menampilkan AppBar bertuliskan "Hello World App" dan teks "Hello World!" di tengah layar dengan font tebal.




Selamat! Kamu sudah berhasil membuat aplikasi lintas platform pertama kamu menggunakan Flutter. Langkah selanjutnya, kamu bisa mencoba menambahkan interaksi tombol atau navigasi halaman.

Happy Coding!


Komentar

Posting Komentar

Postingan populer dari blog ini

Tutorial Panduan Instalasi Android Studio dan Kotlin

Gambar
Halo temen-temen semuanya!! Pada kesempatan kali ini, saya akan membuat tutorial lengkap mengenai cara menginstal Android Studio beserta Flutter, kemudian melanjutkannya dengan membuat project baru dan menjalankannya melalui Android Studio menggunakan Android Virtual Device (AVD). Tutorial ini ditujukan bagi temen-temen yang ingin mulai belajar pengembangan aplikasi perangkat bergerak, khususnya dengan framework Flutter dan environment Android Studio. Setiap langkah akan dijelaskan secara berurutan agar mudah diikuti, mulai dari proses instalasi, konfigurasi SDK, pembuatan project HelloWorld, hingga menjalankan aplikasi pada emulator Android. Apa itu Andorid Studio? Android Studio adalah IDE resmi untuk membuat dan membangun aplikasi Android. Android Studio dikembangkan oleh Google dan dibangun di atas IntelliJ IDEA milik JetBrains, sehingga menyediakan fitur-fitur khusus yang dioptimalkan untuk pengembangan aplikasi Android. Bahasa pemrograman utama yang digunakan dalam pengembangan A...
Baca selengkapnya

Tutorial: Panduan Instalasi Xcode di macOS & Membuat Project iOS "Hello World" Pertama

Gambar
Xcode adalah Integrated Development Environment (IDE) resmi dari Apple yang digunakan untuk membuat aplikasi untuk iOS, macOS, watchOS, dan visionOS. Jika kamu ingin menjadi iOS Developer , langkah pertama yang harus dilakukan adalah menginstal Xcode. Pada panduan ini, kita akan membahas cara menginstal Xcode versi terbaru dan membuat aplikasi sederhana pertama kita. 1. Langkah 1: Unduh dan Instal Xcode dari App Store Langkah pertama adalah mendapatkan Xcode. Cara termudah dan teraman adalah melalui Mac App Store. Buka App Store di Mac kamu. Cari kata kunci "Xcode". Klik tombol Get atau Install. Tunggu hingga proses unduhan selesai. Catatan: Ukuran file cukup besar (sekitar 12GB+), jadi pastikan koneksi internetmu stabil. Seperti yang terlihat pada gambar di bawah, kita menggunakan versi terbaru (Xcode 26.0.1). Tampilan halaman Xcode di Mac App Store. Setelah selesai diunduh, klik Open untuk membuka aplikasi. 2. Langkah 2: Halaman Welcome to Xcode Saat pertama kali membuka X...
Baca selengkapnya