Rabu, 08 September 2021

Installasi Flutter, Android Studio dan Visual Studio Code

Secara umum, menginstall Flutter sangat mudah dan memiliki tahapan yang hampir sama untuk semua OS. Akan tetapi persiapan program pendukungnya yang sedikit berbeda kadang menyulitan bagi sebagian orang. Berikut tahapan lengkap dan cara lengkap install flutter Windows di tahun 2020.

Aplikasi apa saja yang dibutuhkan untuk install Flutter ?

Ada beberapa software yang harus kita unduh dan install terlebih dahulu agar Flutter dapat berjalan dengan baik. Berikut:

  1. Java Development Kit (JDK);
  2. Android Studio;
  3. Android SDK;
  4. Flutter SDK;
  5. IDE / Teks Editor (disini kita akan menggunakan Visual Studio Code)

PERHATIAN : untuk menginstall semua program pendukung tersebut kita akan mendownload file yang cukup besar. Jadi pastikan untuk menggunakan jaringan internet yang baik dan kuota yang mumpuni tentunya ðŸ™‚

Screen Shot 2020 07 29 at 07.20.15

1. Download Flutter dan Aplikasi pendukung

Download Java SE Development Kit.

Saat tutorial ini dibuat, versi Oracle JDK terbaru berada di versi 15. Menurut keterangan dari situs Oracle itu sendiri, mereka akan merilis versi terbaru setiap 6 bulan sekali. Jadi bukan tidak mungkin saat anda membaca tutorial ini Oracle sudah merilis versi JDK terbaru.

Silahkan download Java SE Development Kit 15 melalui link dibawah ini :
https://www.oracle.com/java/technologies/javase-jdk15-downloads.html


Terdapat dua versi (zip dan exe), silahkan pilih versi exe saja agar mudah dalam proses installasi. Untuk mendownload, klik link yang berada di kolom sebelah kanan dan simpan di folder C:\src

Catatan : Untuk kemudahan tutorial ini maka kita sepakati untuk menyimpan semua hasil download file di C:\src

Selesai mengunduh JDK, selanjutnya

Download aplikasi Android Studio

URL : https://developer.android.com/studio

Klik tombol hijau untuk mendownload dan simpan juga di folder C:\src. Ukuran file cukup besar sekitar 892 MB.

android studio

Setelah itu langkah selanjutnya :

Download Visual Studio Code

URL : https://code.visualstudio.com/

Visual studio code merupakan salah satu IDE atau text editor yang disarankan oleh pihak Flutter. Dan pada tutorial-turorial di belajarFlutter.com selanjutnya pun juga akan banyak mengunakan Visual Studio Code ini. Bagi yang sudah memiliki VsCode silahkan lewati tahapan ini.

vscode download

Download Flutter

Terakhir download Flutter untuk Windows di halaman https://flutter.dev/docs/get-started/install/windows dan simpan juga di folder src.

download dan install flutter versi 1.22.1 stable
flutter versi 1.22.1 stable

Kini kita sudah memiliki 4 file di folder src. kurang lebih tampilannya seperti dibawah ini..

struktur file

2. Install Aplikasi Pendukung

File yang pertama kita install yaitu JDK (Java Development Kit), caranya :

  1. Double klik JDK Installer, lalu
  2. klik next hingga installasi selesai.

Kita dapat memilih lokasi installasi tapi sebaiknya install di lokasi default untuk mempermudah pencarian atau meminimalisir terjadinya error jika terdapat software lain yang membutuhkan jdk tersebut

jdk install 2
Install JDK Success

Install Android Studio dan Android Virtual Device (AVD)

Sama halnya seperti menginstall JDK, proses installasi juga cukup mudah caranya

    1. Jalankan file exe Android Studio,
    2. Klik next hingga selesai

Lakukan Konfigurasi Android Studio pertama kali dengan cara

    1. Jalankan Android Studio
    2. Pilih “do Not Import settings” saja,
    3. Klik next dan pilih tipe installasi standar
    4. pilih tema sesuai kesukaan lalu klik Finish.

Tunggu hingga proses download selesai.

Selanjutnya Install Android Virtual Device (AVD)

Melalui Android studio, kita juga dapat membuat Android Virtual Device (AVD) atau lebih dikenal dengan istilah Emulator. Apabila tidak ingin menggunakan emulator dari android studio silahkan lewati tahapan ini.

Untuk alternatifnya kita dapat menggunakan emulator lain salah satunya yaitu Genymotion. Tutorial cara install genymotion di flutter silahkan baca disini

Cara Install Android Virtual Device (AVD)
    1. Jalankan Android studio
    2. pada tampilan “Welcome to Android Studio“, klik tombol config yang ada di kanan bawah,
    3. klik SDK Manager
    4. pilih versi android yang akan di download, lalu klik Apply
    5. tunggu hingga proses download selesai dan klik OK.

Setelah proses download selesai

    1. klik kembali tombol configure, namun kini kita pilih AVD Manager.
    2. Klik tombol “Create Virtual Device”,
      Karena disini kita ingin membuat emulator untuk handphone maka untuk category kita pilih Phone,
    3. Pilih tipe handphone yang memiliki playstore nya, di tutorial ini saya memilih “Pixel 3a


3. Install Flutter

Untuk install flutter lakukan tahapan dibawah ini:

    env

    1. Buka ke folder C:\src
    2. Extract Flutter zip file dengan cara klik kanan pada file zip lalu pilih “extract here” sehingga struktur foldernya akan menjadi seperti ini C:\src\flutter
    3. setelah selesai extract, selanjutnya kita ke menu search bar di pojok kiri windows lalu ketikan “ENV” lalu tekan enter
    4. Tekan tombol Enviroment Variables di pojok kanan bawah dialog
    5. pada table User variables for …. pilih Path lalu klik Edit (Jika tidak ada pilihan Path maka anda dapat membuat baru dengan cara memilih tombol New)
    6. Klik tombol New lalu ketikan C:\src\flutter\bin
    7. Klik Ok

Untuk mengecek apakah flutter kita sudah terinstall dengan baik, silahkan buka CMD lalu ketikan “Flutter”. Jika muncul pesan error seperti “not recognize ..” harap cek kembali tahapan diatas dan ulangi sampai berhasil.

4. Install Extension Flutter di Visual Studio Code

Bagi yang belum menginstall Visual Studio Code, silahkan Install terlebih dulu dengan cara double klik file exe nya, lalu next saja hingga selesai.

 

vscode3

    1. Buka Aplikasi Visual Studio Code
    2. klik menu Extension yang ada di kiri toolbar
    3. lalu ketikan “Flutter” dan install
    4. untuk mempermudah pekerjaan kita nanti ada baiknya install juga “Flutter Widgets Snippet”

5. Buat Aplikasi Pertama dengan Flutter

masih di text editor visual studio code, untuk membuat projek flutter pertama kita caranya yaitu :

    1. Klik menu view -> Command Palette atau cara lebih mudahnya tekan tombol Ctrl+Shift+P
    2. Lalu ketikan “Flutter” dan pilih Flutter: New Project”
    3. masukan nama projeknya contoh “belajar_flutter” setelah itu tekan Enter dan pilih lokasi tempat menyimpan projek tersebut
    4. Tekan F5 untuk menjalankan Aplikasi Flutter Pertama kita lalu pilih Emulator yang akan kita gunakan.

kita juga dapat menjalankan flutter di rill device (handphone), untuk detailnya tunggu artikel selanjutnya.

Selesai menginstall flutter dan emulator ? Silahkan lanjut ke artikel selanjutnya :



setelah terinstall semua. terkadang tidak bisa langsung jalan. karena membutuhkan settingan di android device nya. 

ikuti langkah berikut :

  1. Turn off "MIUI optimization" and Restart

  2. Turn On "USB Debugging"

  3. Turn On "Install via USB"

  4. Set USB Configuration to Charging

  5. Turn On "install via USB


dengan mengikuti langkah tersebut, akhirnya instalasi bisa berhasil.





sumber pertama : https://belajarflutter.com/cara-lengkap-install-flutter-di-windows/

sumber kedua : https://stackoverflow.com/questions/47239251/install-failed-user-restricted-android-studio-using-redmi-4-device