[Update Oktober 2020] Cara Lengkap Install Flutter di Windows

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 🙂

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

download java se untuk windows flutter

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
  • install android studio
  • install android studio2
  • install android studio6

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.
  • install android studio7
  • install android studio10
  • install android studio11

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.
  • Screen Shot 2020 07 29 at 07.20.15
  • install android studio14

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“
  • install android studio16
  • Screen Shot 2020 07 29 at 07.33.14
  • Screen Shot 2020 07 29 at 07.33.50

3. Install Flutter

Untuk install flutter lakukan tahapan dibawah ini:

  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
  • env
  • env2
  • env3

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.

  • env succes

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.

  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”
  • vscode1
  • vscode3

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.
  • vscode4
  • vscode 1
  • vscode 2

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

Selesai menginstall flutter dan emulator ? Silahkan lanjut ke artikel selanjutnya :
– Struktur Widget pada Aplikasi Flutter
– Perbedaan Stateful dan Stateless Widget di Flutter

Admin
Admin
Articles: 57

11 Comments

  1. Bang, mau nanya, kenapa ketika running test di visual code, emulator saya ga muncul dan mendapatkan error ini ya.

    NoSuchMethodError: The getter ’emulatorPath’ was called on null.
    Receiver: null
    Tried calling: emulatorPath

    Saya udah buat AVD di android studio dengan API 29 dan 30, masih tetap ga bisa kebuka emulatornya di visual code ketika running app testnya.
    Apakah ketika mau running app test di visual code, android studio harus dalam keadaan running juga?

    Terima kasih.

    • Hi Ivan, Yaps betul, sebelum menjalankan flutter run kita harus menjalankan Emulator nya terlebih dahulu.
      Jika emulator sudah berjalan namun tetap tidak bisa juga, coba ikuti tips dibawah ini

      • pertama coba jalankan flutter doctor pastikan tidak ada error di flutter, android toolchain dan vscode nya
      • pastikan menggunakan flutter versi stable terbaru. Untuk update flutter bisa menggunakan perintah flutter upgrade
      • Cek emulator yang tersedia dengan cara jalankan perintah flutter emulators, dan jika ada maka jalankan dengan perintah flutter emulators --launch {emulator id}
      • Masih tidak bisa juga ? coba dengan emulator lain seperti dari genymotion atau yang lainnya

      Semoga berhasil 🙂

  2. Exception in thread “main” java.lang.RuntimeException: Could not determine wrapper version.
    at org.gradle.wrapper.GradleWrapperMain.wrapperVersion(GradleWrapperMain.java:111)
    at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
    Caused by: java.lang.RuntimeException: No build receipt resource found.
    at org.gradle.wrapper.GradleWrapperMain.wrapperVersion(GradleWrapperMain.java:97)
    … 1 more
    Exception: Gradle task assembleDebug failed with exit code 1
    Exited (sigterm)

    solusi dong?

    • Hi Anjar, Error tersebut biasanya terjadi karena download Gradle yang tidak lengkap atau rusak.
      Silahkan coba tahapan dibawah ini :

      1. Hapus cache Gradle yang ada dengan cara buka folder C:/users/nama_kamu/ dan hapus .gradle (biasanya Gradle dalam keadaan hidden)
      2. Lalu jalankan perintah flutter run --verbose di terminal/cmd dengan koneksi internet yang stabil dan tunggu sampai aplikasi berjalan, jangan batalkan

  5. saya mau tanya min, cara memunculkan main.dart lib pada step buat aplikasi pertama dengan flutter itu bagaimana ya?. terimakasih

Leave a Reply

Your email address will not be published.