Skip to main content

Setup Environment dan Instalasi

Sebelum memulai proses development kita harus meng-install apa saja tools yang dibutuhkan atau melakukan setup environment software yang dibutuhkan:

Persyaratan Sistem Minimum​

Periksa terlebih dahulu apakah sistem yang akan digunakan sebelum melanjutkan. Berikut syarat yang harus dipenuhi untuk berbagai sistem operasi:

  • Sistem Operasi: Windows 7 SP1 atau diatas nya (64-bit), x86-64 based.
  • Sisa Disk: 1.64 GB (tidak termasuk untuk IDE/Tools lainnya).
  • Tools: Flutter bergantung pada beberapa tools ini yang tersedia di envronment kalian

JDK​

Pertama kali yeng perlu di perhatikan untuk melakukan development pada platform Android. Pastikan Java Development Kit juga telah ter-install.

Download JDK​

  1. Download File Berikut JDK (Sesuaikan dengan Arsitektur OS Kalian 32/64 Bit)
  2. Lakukan Instalasi (Next Saja)

Flutter SDK​

Setelah Persyaratan telah terpenuhi, maka perlu mendapatkan / Mendownload SDK Flutter

Download SDK​

  1. Download Flutter SDK yang telah di bundled Fluterr SDK - Windows 2.10.3 - Stable Untuk Versi lain, silahkan cek halaman Rilis SDK

  2. Ekstrak file zip yang telah di download dan letakkan folder flutter yang ada di dalam pada folder yang di inginkan

    tip

    contoh: C:\Users\nama-user\Documents\development\

    caution

    jangan meletakkan Flutter di direktori seperti C:\Program Files\ atau lainnya yang membutuhkan hak akses yang tinggi.

    alt

Update Path​

Setelah mendapatkan SDK Flutter, kita perlu mengupdate path agar command flutter dapat di jalankan pada CMD/Terminal Dengan Cara sebagai berikut:

  1. Buka Pencarian Windows dan Cari dengan Keyword "env"

    alt

  2. Klik Button Environment Variables

    alt

  3. Pada bagian username pilih variabe "Path" lalu pili edit, Jika tidak ada buat saja.

    alt

  4. Saat mengedit environment variable, tambah kan saja value baru yaitu: Path/Direktori dari flutter\bin pada saat Ekstrak sebelumnya

    alt

tip

Anda dapat meng-copy path dengan cara klik kanan pada address bar di windows explorer dan copy as a text alt

Flutter CLI​

Binary Flutter yang kita download sebelum nya memiliki command-line tools yang dapat digunakan, contoh nya yaitu:

  1. flutter doctor
  2. flutter create

flutter doctor​

Apa tujuan command ini ? Command ini bertujuan untuk memeriksa apakah environment yang sudah kita siapkan sudah sesuai atau belum. contoh: command ini akan memberitahukan apa saja yang belum ter install dan belum dilakukan

info

contoh output dari command flutter doctor:

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.

command ini memberitahukan bahwa ada android SDK yang belum ter install

tip

seharusnya seperti ini:

E:\UNAMA\Dosen\Mobile-Flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.3, on Microsoft Windows [Version 10.0.19043.1266], locale en-ID)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[!] Visual Studio - develop for Windows (Visual Studio Build Tools 2017 15.9.39)
    X Visual Studio 2019 or later is required.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.65.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 1 category.

NB: ada 1 Peringatan, tapi tidak masalah karna hanya akan mendevelop untuk mobile

IDE​

IDE atau Integrated Development Environment merupakan program yang memilki fasilitas untuk membuat perangkat lunak

  1. Download Aplikasi Android Studio pada link berikut: Download
  2. Lakukan Instalasi, Agree dan Next saja hingga proses selesai
  3. Jika telah selesai, Ada beberapa hal yang perlu di pastikan nanti:
  • Android SDK
  • Android Command-line tools
  • Android Virtual Device (Emulator)

Android SDK​

Setelah Android Studio Berhasil di install, kita perlu memastikan Android SDK juga sudah ter install.

  1. Buka SDK Manager di Android Studio

alt

  1. Pastikan pada Tab SDK Platform ada Android yang status nya ter install, dalam gambar ini ada 2 yaitu Android 12 dan Android 5.1

alt

  1. Pada tab SDK Tools, pastikan Android SDK Command-line Tools ter install

alt

Android Virtual Device​

Kita dapat menggunakan Emulator untuk menjalankan Aplikasi yang telah kita buat. Terdapat beberapa virtual device yang digunakan seperti Nox Emulator tapi kita akan menggunakan Android Emulator Bawaan

  1. Buka AVD Manager di Android Studio

alt

  1. Pilih Create Virtual Device (Jika Belum ada)
  2. Pilih Tipe Device yang di inginkan
  3. Pilih Versi Android dan download
  4. Next dan Finish

Android Licenses​

Pada command line / CMD / Terminal silahkan jalankan perintah berikut:

flutter doctor --android-licenses

untuk menyetujui agreement licenses nya.

VS Code Extensions​

Kita dapat menginstall beberapa extension yang dapat membantu kita dalam proses development, yaitu:

  1. Dart --> Untuk Bahasa Dart
  2. Flutter --> Untuk Flutter

Pada Side Bar VS Code pilih extension

alt

Project Baru​

Kita dapat membuat project baru di flutter dengan menggunakan VS Code atau menggunakan Flutter CLI dengan Terminal / CMD

  1. Ke tab View --> Command Pallate / Ctrl + Shift + P

alt

  1. Ketik Flutter, Lalu Pilih New Project

alt

  1. Pilih Application

alt

  1. Pilih Lokasi Penyimpanan Project
  2. Tunggu Proses Selesai

Buka dengan VS Code​

info

Pada Saat Membuat dengan Command Pallate di VS Code, Harus nya Otomatis ke Folder Project Tsb

  1. Buka VS Code
  2. Pilih Tab File
  3. Pilih Open Folder
  4. Pilih Folder yang telah di buat tadi

Struktur Folder​

Pada proses pembuatan project baru flutter sebelumnya, kita dapat cek ada beberapa file & folder yang ada. Masing-masing mempunyai fungsi tersendiri

alt

Kita akan coba bahas beberapa, yaitu:

  1. android: Berisi file untuk melakukan konfigurasi pada android
  2. ios: Berisi file unttuk melakukan konfigurasi pada iOS
  3. lib: Berisi code utama dari aplikasi
  4. pubspec.yaml: File untuk mengelola dependencies pada aplikasi

Jalankan dengan Emulator​

caution

Pastikan Android Virtual Device sudah di setup seperti di step sebelumnya

  1. Jalankan Android Virtual Device yang di inginkan

alt

  1. Pada status bar VS Code Bagian bawah kanan, pastikan device sudah terpilih

alt

Jalankan dengan Smartphone​

info

Pastikan Mode Pengembang Aktif pada Smartphone.
Tiap Smartphone mungkin akan berbeda

img

Lalu ke System & Device >> Additional Settings >> Developer Options
aktifkan usb debgging dan install via usb

img

info

Pada Saat pertama kali di run, akan terasa relatif lama. Namun fitur hot reload yang ada nanti cukup membantu.

  1. Pada tab Run --> Start Debugging / F5 --> Pilih Dart & Flutter

alt

  1. Nanti akan muncul icon ini di VS Code, dan icon petir itu untuk melakukan hot reload

alt

Jika Berhasil di jalankan akan menampilkan Project Demo Berikut:

alt