Panduan Install Flutter & Setup Text Editor VS Code di Windows

Luhur Fatah 11 bulan ago

Selamat datang di Panduan Cara Install Flutter & Setup Text Editor VS Code di Windows , tapi sebelum masuk ke tutorial, berikut beberapa pertanyaan yang sering ditanyakan seputar Flutter (FAQ)

Pertanyaan – Pertanyaan Seputar Flutter

Apa itu Flutter?

Flutter adalah sebuah Open Source SDK atau Software Development Kit yang dibuat oleh Google. Flutter bisa digunakan untuk membuat sebuah aplikasi dari mulai aplikasi Android, IOS, Windows, Mac, Linux, Google Fuchisa dan termasuk aplikasi Web.

Apa Bahasa Pemrograman yang digunakan?

Bahasa yang digunakan untuk membuat aplikasi berbasis Flutter adalah Bahasa Dart.

Apa kelebihan Flutter dibandingkan dengan SDK lain?

Flutter memiliki kelebihan seperti :
Mudah untuk dipelajari, Cross Platform, dan Bisa digunakan utuk membuat aplikasi dengan UI yang sangat indah.

Alat apa saja yang harus dipersiapkan?

Yang pertama kita butuh Editor atau IDE, ummnya orang menggunakan Android Studio atau VS Code.
Yang kedua adalah Emulator (bawaan android studio) atau Hp android untuk menjalankan aplikasi

Cara Install Flutter di Windows

Lansung saja, pertama kita Download terlebih dahulu SDK Flutternya

Setelah selesai di Download, silahkan taruh file tersbut ke folder yang aman, lalu Ekstrak.

Setelah itu copykan file hasil ekstrak tadi (berupa folder dengan nama flutter) ke C: masing masing.

Kurang lebih jadinya seperti ini :

Cara Set up Flutter di Windows

Langkah selanjutnya adalah Setting Environment Variable

Cara Setting Environment Variable

Klik pada icon Windows (Start), lalu ketikan Env, lalu akan muncul pilihan seperti dibawah ini

Cara Setting  Environment Variable

Lalu klik Edit the system environtment variables, lalu akan muncul seperti ini :

Cara Setting  Environment Variable

Klik pada Environment Variables

Baca Juga :   Cara Install Wordpress Offline di Localhost menggunakan XAMPP

Akan muncul seperti ini :

Cara Setting  Environment Variable

Klik pada varible Path lalu klik tombol Edit

Akan muncul seperti ini :

Cara Setting  Environment Variable

Lalu klik tombol New, lalu isikan seperti ini :

C:\flutter\bin

lalu Enter, sehingga akan menjadi seperti gambar di atas (yang saya kotaki biru)

Lalu klik Ok.

Mungkin sebagain ada yang bingung kenapa kita harus setting environment variable, atau mungkin malahan tidak tau sama sekali mengenai Environment variable ini.

Jadi mungkin akan saya jelaskan sedikit (dengan bahasa yang mudah dipahami) mengenai si Environment variable ini.

Apa itu Environment variable ?

Environment varible dalah sebuah varibel yang ada pada komputer yang digunakan untuk menyimpan sebuah value barupa Path (alamat sebuah program yang telah diinstall) sehingga dapat digunakan untuk memanggil program tersebut.

Lalu kenapa kita harus setting Environment variable ?

Simpelnya karna nanti ketika kita develop aplikasi berbasis flutter dengan menggunakan VS Code kita akan banyak menggunakan terminal, nah untuk memanggil si flutter ini kita harus menyimpan alamat file bin yang ada pada folder flutter ke Environment Varible agar kita bisa memanggilnya lewat terminal.

Nah gimana? cukup jelas bukan?

Kalo masih ada yang bingung silahkan ditanyakan di kolom komentar.

Langkah selanjutnya ada Setting VS Code.

Tapi sebelumnya kita cek terlebih dahulu apakah flutter sudah berhasil terinstall di komputer kita.

Cara ceknya cukup mudah, buka CMD lalu ketikan flutter, lalu tekan tombol Enter dua kali.

Jika instalasi berhasil maka akan muncul seperti ini :

fluttter cmd

Mempersiapkan Visual Studio Code untuk Develop Aplikasi Flutter

Di sini saya hanya akan menjelaskan cara setting VS Code untuk flutter, saya tidak akan menjelaskan dari awal Instalasi VS Code dll, jadi saya asumsikan di komputer anda sudah terinstall VS Code.

Oke, langsung saja kita buka VS Code, lalu pilih Extension (icon sebelah kiri yang paling bawah)

Lalu cari Ekstensi dengan nama Flutter, setelah itu klik Install.

Cara Set up VS Code untuk Flutter

Lalu cari dan install ekstensi Dart

Cara Set up VS Code untuk Flutter

Note
Untuk versi VS Code terbaru mungkin ekstensi Dart sudah otomatis terinstall secara default, jadi tidak usah install lagi.

Cara Membuat Project Flutter baru

Buat folder baru, lalu buka folder tersebut di Visual Studo Code.

Baca Juga :   Cara Hapus Background Foto Tanpa Photoshop (Cuma 5 detik)

Lalu buka terminal (Ctrl+~).

Untuk bisa membuka terminal secara langsung di VS code, anda harus sudah mengaktifkan fitur Integrated terminal terlebih dahulu.

Jika belum, silahkan buka File »  Preferences »  Settting atau bisa juga menggunakan Shortcut (Ctrl+,).

Lalu pergi ke Features »  Terminal.

Lalu pada bagian Explorer Kind pilih Integrated.

Cara Membuat Project Flutter baru

Jika sudah, kita buka terminalnya.

Lalu ketikan pada terminal perintah berikut ini.

flutter create projectbaru

Tunngu beberapa saat sampai proses selesai.

Cara Membuat Project Flutter baru

Jika sudah seperti gambar di atas, artinya project sudah berhasil dibuat.

Beberapa hal yang harus diperhatikan

Untuk develop aplikasi berbasis flutter menggunakan VS Code, kita butuh perantara untuk menjalankan aplikasi tersebut (Debugging & Running), perantara tersebut bisa berupa Emulator ataupun Device Android

Ketika anda memilih untuk menggunakan Emulator, maka anda juga harus menginstall Android Studio, lalu membuat Emulator disana menggunakan AVD yang sudah disedikan disana. untuk lebih lengkapnya bisa dibaca disini.

Kekurangan ketika memilih menggunakan Emulator adalah membutuhkan ram yang cukup besar (setidaknya butuh leptop yang memiliki Ram 8 ke atas)

Sedangkan untuk menggunakan Android Device sebagai Perantara anda harus melakukan beberapa konfigurasi terlebih dahulu, untuk lebih jelasnya bisa dilihat disini

(Update Februari 2020)

Untuk lebih memudahkan, saya akan jelaskan juga Cara Membuat Emulator di Android Studio untuk menjalankan apliaksi flutter.

Cara Membuat Emulator di Android Studio untuk Running aplikasi Flutter

Pertama download dan install terlebih dahulu Android Studionya, bisa didownlaod di sini »   Android Studio.

Lalu install seperti biasanya atau jika anda mengalami kesulitan dalam proses instalasi silahkan lihat video ini.

Jika proses instalasi sudah selesai, langsung saja buka android studionya.

Lalu buka AVD Manager (ada di pojok kanan).

Cara Membuat Emulator di Android Studio untuk Running aplikasi Flutter

Lalu pilih + Create Virtual Device.. (ada di pojok kiri bawah).

Lalu silahkan pilih jenis Smartphone apa yang ingin ana buat Emulatornya (saya biasanya menggunakan Pixel 2).

Atau anda juga bisa mengatur sendiri Resolusi device-nya dengan memilih New Hardware Profile.

Jika sudah klik Next.

Baca Juga :   Contoh Program C dan C++ untuk Menghitung Keliling dan Luas Lingkaran

Lalu anda akan disuruh untuk memilih Sistem Operasi Android apa yang akan anda gunakan (usahakan pilih yang paling terbaru atau satu tingkat dibawahnya).

Cara Membuat Emulator di Android Studio untuk Running aplikasi Flutter

Apabila anda baru pertama kali membuat Emulator di Android Studio, maka anda akan disuruh mendownload Android yang akan dipakai terlebih dahulu.

Jika sudah, klik Next.

Anda akan disuruh memilih mode layar ketika pertama kali dijalankan (Potrait atau Landscape), pilih sesuai kebutuhan.

Cara Membuat Emulator di Android Studio untuk Running aplikasi Flutter

Jika sudah klik Finish.

Running Aplikasi Flutter

Setelah semua proses diatas telah selesai, kita akan langsung merunning aplikasi awal yang sebelumnya sudah dibuatkan oleh flutter pada saat kita membuat project baru di atas.

Oke langsung saja, silahkan buka project flutter yang ada di VS Code

Lalu melalui terminal, masuk ke folder project flutter yang sebelumnya sudah kita buat.

Caranya dengan mengetikan perintah berikut ke dalam terminal.

cd .\projectbaru\

Lalu run aplikasi flutter dengan menggunakan perintah berikut

flutter run

Jangan lupa untuk menjalankan Emulator terlebih dahulu.

Running Aplikasi Flutter

Atau, kita juga bisa menjalankan aplikasi flutter di VS Code dengan memanfaatkan fitur Debug yang ada di VS Code.

Caranya adalah, buka dulu project flutternya, Lalu cari dan buka file main.dart (biasanya ada di lib » main.dart).

Jika sudah. langkah selanjutnya adalah pergi ke Debug »   Run Without Debugging.

Running Aplikasi Flutter

Lalu pilih Emulator/Device Android yang ingin anda gunakan.

Running Aplikasi Flutter

Lalu tunggu sampai Emulator berjalan dan proses Instalasi selesai (biasanya akan membutuhkan waktu yang cukup lama, apalagi untuk project besar).

Running Aplikasi Flutter

Selamat ! aplikasi flutter pertama anda sudah berhasil berjalan.

Rekomendasi Tempat Belajar Flutter

Berikut ini adalah beberapa tempat untuk belajar flutter terbaik versi saya.

  1. Flutter Tutorial for Beginners by The Net Ninja
  2. Flutter Course – Full Tutorial for Beginners by freecodecamp.com
  3. Flutter & Firebase App Build by The Net Ninja
  4. Flutter in Focus by Flutter

Penutup

Bagaimana? cukup mudah bukan buat dan running aplikasi flutter? apabila masih ada yang kuran jelas, silahkan tanyakan di kolom komentar.

Mungkin cukup sekian artikel Cara Install dan Setting Flutter di Windows dan VS Code kali ini, kurang lebihnya mohon maaf, terimakasih.