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, silahkan ukuti: Persiapan Pemrograman Mobile dengan Flutter bila di komputermu belum terinstal Flutter dan Android Studio.

Setelah itu, silahkan lanjutkan…

1. Install Extension Flutter di VS Code

Pertama silahkan install beberapa extension Flutter yang dibutuhkan. Masuk ke manu extension, lalu ketik flutter.

Install Extension

Setelah itu silahkan 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 projectnya. Isi namanya dengan huruf kecil dan pisah dengan garis bawah (undescore) 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

Silahkan 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.

Silahkan ikutli 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 Virtial Device (AVD) dari Android Studio:

Membuka Android Virtual Device

Klik Create New Virtual Device:

Android Virtual Device Manager

Kemudian pilih jenis prangkat yang diinginkan:

Membuat emulator baru

Berikutnya pilih system image yang akan digunakan:

Membuat emulator baru

Terkhir, 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 silahkan dioprek-oprek sendiri. 😄

Selamat belajar…

Baca Juga ini

Tutorial Flutter #1: Pengenalan dan Persiapan Pemrograman Mobile dengan Flutter

Tutorial Flutter #1: Pengenalan dan Persiapan Pemrograman Mobile dengan Flutter

Belajar membuat aplikasi mobile (Android dan iOS) dengan menggunakan Flutter. Pada artikel ini akan dibahas pengenalan Flutter dan persiapan awal yang harus dilakukan...

Membuat Aplikasi Android Berbasis HTML 5 dengan Cordova

Membuat Aplikasi Android Berbasis HTML 5 dengan Cordova

Pada tutorial ini, kita akan belajar step-by-step membuat aplikasi android dengan HTML 5, CSS, dan Javascript.

[Review] Text Editor Visual Studio Code di Linux

[Review] Text Editor Visual Studio Code di Linux

Bagaimana rasanya menggunakan Visual Studio Code di Linux? Apa saja kelebihan dan kekurangannya? Simak selangkapnya...

[Tutorial Instan] Belajar Cepat Bahasa Pemrograman Dart

[Tutorial Instan] Belajar Cepat Bahasa Pemrograman Dart

Pada tutorial ini, kita akan membahas dasar-dasar bahasa pemrograman Dart. Mulai dari tahap instalasi, sampai membuat class...

Cara Install Android Studio di Linux

Cara Install Android Studio di Linux

Bagaimana Cara Install Android Studio di Linux? Ada beberapa langkah yang harus dilakukan, pertama menginstall beberapa library yang dibutuhkan, lalu menginstall android studio dan melakukan konfigurasi awal sampai bisa digunakan untuk coding.

Ebook dan Video Pemrograman Android Gratis dari Google

Ebook dan Video Pemrograman Android Gratis dari Google

Buat yang belum tahu: Google saat ini sedang mengadakan program untuk melatih 100.000 developer Android di Indonesia. Google ingin membuat pendidikan developer Android kelas dunia bisa diakses oleh semua pelajar dan developer di seluruh Indonesia. 1 Saat ini Google sudah bekerja sama dengan beberapa universitas di Indonesia: Institut Teknologi Bandung Universitas Gadjah Mada Universitas Bina Nusantara Universitas Katolik Parahyangan President University Institut Teknologi Harapan Bangsa Universitas Telkom Universitas Kristen Maranatha Nah untuk mendukung program ini, Google sudah menyediakan ebook/modul dan video tutorial pemrograman android.