Tutorial Install Flutter without Android Studio Ubuntu, Flutter with Visual Studio Code, Linux Ubuntu, cara instal flutter di visual studio code

(2020) Install Flutter Tanpa Android Studio di Ubuntu

Posted on

Cara install Flutter tanpa menggunakan Android Studio di Linux Ubuntu menjadi salah satu pilihan di mana kita tidak ingin menggunakan Android Studio sebagai IDE dalam pengembangan aplikasi android. Alasan utamanya karena Android Studio terasa sangat berat. Bahkan saat ini kebanyakan orang lebih memilih Visual Studio Code dibandingkan Android Studio sebagai text editor. Saya sendiri juga lebih memilih Visual Studio Code karena lebih nyaman meskipun komputer saya mampu untuk menjalankan Android Studio.

Pada tutorial ini, akan saya jelaskan tentang bagaimana cara install Flutter tanpa Android Studio dan konfigurasi VS Code untuk coding Flutter.

 

Persiapan

Untuk install dan menjalankan Flutter, perangkat yang kamu gunakan harus bersistem operasi (Linux 64-bit)

 

Install Visual Studio Code dan Plugin Pendukung

Silakan install VS Code dan beberapa pluginnya dengan cara masuk ke menu extension, ketik keyword “flutter dart” pada kolom pencarian.

Flutter Dart extension
Flutter Dart extension

Reload ulang VS Code agar plugin tadi bekerja.

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

  • Membuat Project Baru
  • Menjalankan perintah flutter doctor
  • Menjalankan Update
  • Dan masih banyak lagi

Cara mengakses perintah-perintah ini, tekan CTRL + SHIFT + P lalu ketik flutter.

Menu flutter pada Visual Studio Code
Menu flutter pada Visual Studio Code

Install OpenJDK 8

Saya menggunakan Java 8 karena versi terbaru dari Java ada beberapa masalah dengan Flutter, tapi untuk Java 8 lancar.

Ketikkan command:

sudo apt install openjdk-8-jre
sudo apt install openjdk-8-jdk

 

Install GIT

Ketikkan command:

sudo apt install git

 

Mengatur Folder

Untuk membuat folder di mana lokasi flutter diinstall kamu bisa langsung membuatnya di direktori Home atau menggunakan terminal.

cd ~
mkdir Android
cd Android
mkdir cmdline-tools

 

Install Flutter SDK

Download Flutter pada URL berikut.

https://flutter.dev/docs/get-started/install/linux

Pergi ke folder Downloads dan ekstrak file flutter yang sudah didownload tadi. Kamu juga bisa mengekstraknya dengan mengetikkan command pada terminal

cd ~/Downloads
tar xvf flutter_linux_1.20.2-stable.tar.xz

Sekarang pindahkan folder flutter yang sudah diekstrak ke direktori home/Android

sudo mv flutter/ ~/Android/

Sekarang lokasi flutter berada di:

home/Android/flutter

 

Install Android Command Line Tools

Download android command line tools pada URL berikut.

https://developer.android.com/studio#command-tools

Command line tools
Command line tools

Pergi ke folder Downloads dan ekstrak file zip.

unzip commandlinetools-linux-6858069_latest.zip

rename folder cmdline-tools hasil ekstrak tadi menjadi tools

mv cmdline-tools tools

pindahkan folder tools ke direktori home/Android/cmdline-tools.

sudo mv tools/ ~/Android/cmdline-tools/

Sekarang lokasi command line tools berada di:

home/Android/cmdline-tools/tools

 

Mengatur Environment Variables

Sekarang kembali ke direktori home dan buka file .bashrc untuk mengatur environment variables.

cd ~
sudo gedit .bashrc

Copy dan paste baris kode ini ke baris paling akhir file .bashrc

export ANDROID=$HOME/Android
export PATH=$ANDROID/cmdline-tools/tools:$PATH
export PATH=$ANDROID/cmdline-tools/tools/bin:$PATH
export PATH=$ANDROID/platform-tools:$PATH

# Android SDK
export ANDROID_SDK=$HOME/ANDROID
export PATH=$ANDROID_SDK:$PATH

# Flutter
export FLUTTER=$ANDROID/flutter
export PATH=$FLUTTER/bin:$PATH

Simpan file.

 

Reload Konfigurasi

Setiap mengubah file .bashrc, harus mereloadnya dengan restart terminal atau ketikkan command berikut.

source ~/.bashrc

 

Download Android SDK

Terdapat 2 perbedaan untuk menginstall SDK antara emulator langsung dari komputer atau melalui debugging langsung menggunakan HP. Silakan pilih yang mana akan kamu gunakan.

1. Emulator melalui komputer

Untuk menjalankan Flutter dengan emulator langsung dari komputer, kita harus menginstall system-images, platforms;android, platform-tools, patcher, emulator, build-tools.

Saat tutorial ini dibuat, saya menggunakan android-30 (API level 30) yang merupakan Android 11. Jika kamu ingin versi lawas, kamu dapat dapat menurunkan nomor API level tersebut.

Untuk melihat versi dari system-images, platforms;android, platform-tools, patcher, emulator, build-tools, ketikkan command berikut.

cd Android/cmdline-tools/tools
sdkmanager --list
SDK Manager Lists
SDK Manager Lists

Untuk menginstall versi 30, ketikkan command berikut satu per satu.

sdkmanager "system-images;android-30;google_apis;x86_64"
sdkmanager "platforms;android-30"
sdkmanager "platform-tools"
sdkmanager "patcher;v4"
sdkmanager "emulator"
sdkmanager "build-tools;30.0.2"

Setujui lisensi

sdkmanager --licenses

 

Konfigurasi SDK path untuk Flutter

flutter config --android-sdk ~/Android

Panggil flutter doctor, Jalankan command.

flutter doctor -v

Perintah di atas akan menampilkan apa saja yang sudah dipasang (ditandai dengan simbol centang ✓), abaikan simbol ! pada Android Studio karena kita tidak menggunakannya.

flutter doctor -v
Hasil yang ditampilkan ketika menjalankan command flutter doctor -v

Kemudian jalankan command berikut untuk menyetujui lisensi.

flutter doctor --android-licenses

 

Membuat Emulator

Ketikkan command di bawah untuk melihat daftar device, pilih satu dan salin ID device.

avdmanager list

Beri sebuah nama pada emulator yang akan kamu buat dan paste ID device ke baris kode berikut.

avdmanager -s create avd -n nama_emulator -k "system-images;android-30;google_apis;x86_64" -d id_device

 

Verifikasi Flutter

Untuk memverifikasi flutter jalankan command.

flutter doctor

Semua yang tampil akan tercentang kecuali Android Studio.

Jika tanpa ada masalah, sekarang jalankan emulator. Kamu dapat menjalankan emulator dengan perintah.

flutter emulator --launch nama_emulator

 

Menjalankan Emulator

Kamu juga bisa menjalankan emulator melalui VS Code, install plugin flutter dan buat project baru dengan menekan CTRL + SHIFT + P  dan ketik Flutter: New Project.

Untuk menjalankan project flutter, pergi ke menu run (CTRL + SHIFT + D) -> pencet tombol Run and Debug -> pilih nama emulator.

Run Flutter Via Emulator
Langkah-langkah menjalankan Flutter melalui emulator

Tunggu beberapa saat, flutter sedang meng-compile project tersebut menjadi sebuah apk. Jika berhasil, emulator akan menampilkan aplikasi flutter demo seperti ini.

Menjalankan Flutter dengan emulator
Menjalankan Flutter dengan emulator

Sekarang kamu bisa membuat aplikasi dengan Flutter tanpa Android Studio melainkan VS Code.

 

2. Emulator melalui HP

Untuk menjalankan Flutter dengan emulator HP, kita hanya menginstall system-images, platforms;android, platform-tools, build-tools.

Saya menggunakan android-29 (API level 29) yang merupakan Android 10. Silakan pilih versi yang kompatibel dengan HP yang dipakai. Jika kamu ingin versi lawas, kamu dapat dapat menurunkan nomor API level tersebut.

Untuk melihat versi dari system-images, platforms;android, platform-tools, build-tools, ketikkan command berikut.

cd Android/cmdline-tools/tools
sdkmanager --list
SDK Manager Lists
SDK Manager Lists

Untuk menginstall versi 29, ketikkan command berikut satu per satu.

sdkmanager "system-images;android-29;google_apis;x86_64"
sdkmanager "platforms;android-29"
sdkmanager "platform-tools"
sdkmanager "build-tools;29.0.2"

Setujui lisensi

sdkmanager --licenses

 

Konfigurasi SDK path untuk Flutter

flutter config --android-sdk ~/Android

Panggil flutter doctor, Jalankan command.

flutter doctor -v

Perintah di atas akan menampilkan apa saja yang sudah dipasang (ditandai dengan simbol centang ✓), abaikan simbol ! pada Android Studio karena kita tidak menggunakannya.

flutter doctor -v
Hasil yang ditampilkan ketika menjalankan command flutter doctor -v

Kemudian jalankan command berikut untuk menyetujui lisensi.

flutter doctor --android-licenses

 

Mengaktifkan USB Debugging pada Android

Untuk menjalankan flutter melalui perangkat fisik, kita harus menyalakan USB Debugging pada HP. Caranya mengaktifkannya mudah, silakan pergi ke Settings, pada kolom pencarian cari dengan keyword “developer” > nyalakan opsi “USB Debugging” dan nyalakan opsi “Install via USB” jika terdapat opsi tersebut, karena beberapa tipe HP berbeda. Pada tutorial ini, saya memakai device Xiaomi Redmi Note 8 Pro.

Mencari pengaturan USB Debugging
Mencari pengaturan USB Debugging
Menyalakan USB Debugging
Menyalakan USB Debugging

 

Jalankan flutter doctor dengan command.

flutter doctor -v

HP mu akan menampilkan pop-up, klik OK untuk menyetujui.

Allow USB Debugging
Allow USB Debugging

Jika kamu mengalami error seperti ini pada terminal, kamu perlu menginstall SDK tambahan.

Error pada flutter doctor
Error pada flutter doctor -v
sudo apt install android-sdk-platform-tools-common

Kemudian cabut HP mu dari komputer dan matikan USB Debugging kemudian nyalakan lagi USB Debugging. Sambungkan kembali HP mu ke komputer.

Jalankan flutter doctor lagi dengan command.

flutter doctor -v
Flutter doctor dengan device fisik terpasang
Flutter doctor dengan device fisik terpasang, di sini saya menggunakan HP Redmi Note 8 Pro

 

Menjalankan Emulator Device HP

Silakan buat project baru dengan menekan CTRL + SHIFT + P  dan ketik Flutter: New Project.

Untuk menjalankan project flutter, pergi ke menu run (CTRL + SHIFT + D) -> pencet tombol Run and Debug.

Run Flutter via device
Langkah-langkah menjalankan Flutter via device HP

Tunggu beberapa saat, flutter sedang meng-compile project tersebut menjadi sebuah apk. Jika berhasil, HP yang kamu pakai akan otomatis menginstall dan membuka aplikasi flutter demo.

Run Flutter melalui HP
Hasil menjalankan Flutter melalui device HP

Sekarang kamu bisa membuat aplikasi dengan Flutter tanpa Android Studio melainkan VS Code.

 

Kesimpulan

Menginstall flutter tanpa Android Studio memang agak rumit dibanding kita menginstall sepaket dengan Android Studio. Namun kita jadi lebih tahu sdkmanager apa yang diperlukan untuk membuat aplikasi android.

Sudah berhasil install Flutter dengan Visual Studio Code? Yuk, kita lanjut belajar membuat program hello world di artikel Membuat Project “Hello World” dengan Flutter.

 

Gravatar Image
Tukang coding yang suka dengan perkembangan teknologi.

Leave a Reply

Your email address will not be published. Required fields are marked *