author Ahmad Muhardian

Tutorial Flutter #2: Cara Menggunakan Visual Studio Code untuk Coding Android dengan Flutter


Coding Flutter di VS Code

Visual Code Studio memang canggih. Ia bisa digunakan untuk berbagai hal.

Salah satunya untuk coding atau membuat aplikasi android.

Ini bisa jadi alternatif, buat kamu yang tidak ingin menggunakan Android Studio.

Karena Android Studio lumayan berat dan berjalan lambat di komputer yang spek-nya rendah.

Pada artikel ini, saya akan membahas cara set-up VS Code agar bisa digunakan untuk coding Android dengan Flutter.

Sebelumnya pastikan sudah menyiapkan Flutter dan Android Studio di komputernya.

Lho!

kok Android Studio?

Bukannya kita mau ngoding dengan VS Code?

Iya, Android Studio kita butuhkan untuk menginstal SDK, Image untuk emulator, dan membuat emulator.

Karena sekarang—entah kenapa—kita tidak bisa menjalankan Android SDK Manager dan AVD Manager tanpa Android Studio.

Mungkin maunya Google, supaya orang-orang tetap pakai Android Studio. Hehehe 😄

Oke, silakan ikuti: Persiapan Pemrograman Mobile dengan Flutter bila di komputermu belum terinstal Flutter dan Android Studio.

Setelah itu, silakan lanjutkan…

1. Install Extension Flutter di VS Code

Pertama silakan install beberapa extension Flutter yang dibutuhkan. Masuk ke menu extension, lalu ketik flutter.

Install Extension

Setelah itu silakan reload atau buka ulang VS Code…

Setelah menginstal extension, kita akan bisa menggunakan beberapa perintah seperti:

  1. Membuat Project Baru
  2. Menjalankan perintah flutter doctor
  3. Menjalankan Update

Cara mengakses perintah-perintah ini, tekan Ctrl+Shift+P lalu ketik flutter.

Perintah dasar Flutter di VS Code

2. Membuat Project Flutter di VS Code

Cara membuat project Flutter di VS Code:

Tekan tombol Ctrl+Shift+P, lalu pilih New Project.

Perintah dasar Flutter di VS Code

Kemudian kita, akan diminta menentukan nama project-nya. Isi namanya dengan huruf kecil dan pisah dengan garis bawah (underscore) jika namanya lebih dari dua suku kata.

Sebagai contoh, nama project yang akan saya buat adalah petani_kode.

Nama Project Flutter

Kemudian kita akan diminta untuk menentukan lokasi penyimpanan project. Kita bisa menyimpan di tempat yang diinginkan.

Lokasi penyimpanan

Tunggulah proses pembuatannya sampai selesai…

Pembuatan project Flutter

3. Emulator untuk Flutter

Ada tiga macam emulator yang bisa digunakan untuk menjalankan aplikasi Flutter:

  1. Emulator bawaan Android Studio
  2. Smartphone fisik (HP sendiri)
  3. Genymotion

Silakan pilih mau pakai yang mana. Saya sendiri pernah mencoba menggunakan Emulator Android Studio dan Smartphone fisik.

Menurut saya, yang paling enak menggunakan hp sendiri. Karena dapat mengurangi resource komputer dan mudah digunakan, tinggal colok dengan kabel data dan Flutter akan langsung mendeteksinya.

Tapi ada kekurangannya, yaitu: API yang bisa dipakai akan bergantung dari versi OS HP itu saja.

Misal:

Kamu ingin mencoba menggunakan API yang ada di level 26 (Oreo), sedangkan OS smartphone-mu masih level 19 (Kitkat); ya… tidak akan bisa.

Bagaimana caranya agar bisa?

Kita bisa menggunakan emultor bawaan Android Studio atau Genymotion.

Karena dengan emulator ini, kita bisa menginstall OS versi berapapun yang kita inginkan.

Nah, buat yang ingin menggunakan emulator android studio, saya merekomendasikan menginstal image API level 28.

Silakan ikuti langkah-langkah berikut untuk menginstalnya…

Buka Android Studio, Klik ikon Android SDK Manager:

Android SDK Manager

Kemudian install image untuk API Level 28:

Android SDK Manager

Setelah terinstal, buatlah emulator baru dengan image tersebut.

Buka Android Virtual Device (AVD) dari Android Studio:

Membuka Android Virtual Device

Klik Create New Virtual Device:

Android Virtual Device Manager

Kemudian pilih jenis perangkat yang diinginkan:

Membuat emulator baru

Berikutnya pilih system image yang akan digunakan:

Membuat emulator baru

Terakhir, tentukan nama AVD atau emulatornya:

Membuat emulator baru

Dengan demikian…

…kita sudah bisa menggunakan android emulator untuk menjalankan aplikasi Flutter.

Kita bisa menutup Android Studio, karena sudah tidak dibutuhkan. Kecuali, kalau ingin ngoding di Android Studio.

4. Menjalankan Aplikasi Flutter

Sekarang, kembali ke project Flutter yang di VS Code. Coba tekan Ctrl+Shift+P lalu ketik flutter dan pilih Launch Emulator.

Menjalankan Emulator Android dari VS Code

Kemudian pilih emulator yang akan dibuka.

Daftar emulator Android

Tunggu beberapa saat sampai emulatornya terbuka seperti ini:

emulator Android

Sekarang, kita sudah siap menjalankan aplikasi Flutter-nya di emulator. Tekan lagi tombol Ctrl+Shift+P, kemudian pilih Select Device untuk memilih emulator yang sedang berjalan.

memilih emulator Android

Terakhir, masuk ke menu Debug kemudian klik Run.

Run aplikasi flutter di VS Code

Jika belum bisa, coba klik Config terlebih dahulu, lalu coba Run lagi…

Tunggulah proses build apk-nya, biasanya untuk run pertama kali akan memakan waktu yang cukup lama. Karena harus men-download beberapa dependency untuk aplikasinya.

Hasilnya:

Run aplikasi flutter di VS Code

Selamat 🎉…

Kita sudah berhasil membuat aplikasi Flutter melalui VS Code.

Tambahan: Emulator Menggunakan HP

Bila kita tidak ingin menggunakan emulator dari Android Studio, kita bisa menggunakan smartphone atau hp sendiri.

Caranya:

  1. Hubungkan komputer dengan hp menggunakan kebel data;

  2. Pastikan Hp-nya sudah diaktifkan developer options dan debugging;

  3. Jalankan perintah Flutter Doctor dari VS Code;

    Flutter doctor di Vs Code

    Jika muncul seperti ini:

    Perangkat yang terhubung

    Berarti Hp kita sudah terdeteksi dan siap digunakan untuk menjalankan aplikasi Flutter.

  4. Coba jalankan aplikasi flutter;

  5. Selesai.

Apa Selanjutnya?

Yak!

Begitulah cara menggunakan Visual Studio Code untuk coding aplikasi Android dengan Flutter.

Selanjutnya silakan dioprek-oprek sendiri. 😄

Selamat belajar…