You are on page 1of 70

System Requirements

● Sistem operasi Windows 7 SP1 or later (64-bit)


● Space kosong 1.64 GB (Tidak termasuk space tool
lainnya)
● Windows PowerShell 5.0 dan Git for Windows
Install Git
● Step 1: Download Installer Git for Windows
● Step 2: Pergi ke hasil download dan double klik
file installer nya
● Step 3: Klik Next, biarkan lokasi instalasi nya
secara default
● Step 4: Klik Next sampai tombol Next tersebut
berubah menjadi Install (biarkan seluruh
pengaturannya secara default)
● Step 5: Unchecklist seluruh checkbox, lalu klik
Finish
● Step 6: Buka Windows PowerShell atau cmd untuk
memastikan Git sudah terinstall. Jalankan perintah
git --version

Jika berhasil terinstall, ada


keterangan seperti ini.
Install
Flutter SDK
● Step 1: Download Flutter SDK
● Step 2: Ekstrak zip file hasil download di
C:\src\flutter
● Step 3: Update path, pergi ke Environment Variables
(tekan windows lalu ketik env)
● Step 4: klik Environment Variables…
● Step 5: Pilih Path yang di User variables, lalu Klik
Edit
● Step 6: Tambahkan lokasi flutter\bin ke dalam
environment variables (Copy: C:\src\flutter\bin)

Kedua, Klik New


Pertama, Copy lokasinya
Terakhir, paste
lokasinya disini
● Step 7: Tekan OK untuk menutup seluruh environment
variable nya
● Step 8: Untuk memastikan flutter sdk sudah berhasil
terinstall, buka Windows PowerShell lalu jalankan
perintah flutter

Jika muncul
seperti ini,
flutter berhasil
terinstall
● Step 9: Menjalankan perintah flutter doctor pada
Windows PowerShell

Flutter doctor akan


memeriksa tools apa saja
yang belum terinstall:

● Android Studio
● Visual Studio Code
● Android toolchain
Install Android
Studio
● Step 1: Download Android Studio

Klik checkbox
● Step 2: Double klik file installer Android Studio
yang sudah di download, lalu klik Next
● Step 3: Klik Next, biarkan seluruh pengaturan dan
lokasi penyimpanan secara default. Klik sampai
tombol Next berubah menjadi Install
● Step 4: Klik Install, tunggu sampai instalasi
Completed. Setelah itu klik Next
● Step 5: Klik Finish, pastikan checkbox Start Android
Studio tercentang

Pastika
checkbox ini
tercentang
● Step 6: Pilih Do not import settings, lalu tekan OK

Untuk data sharing, klik


Don’t send
● Step 7: Di Setup Wizard ini, biarkan settingannya
secara default. Klik Next
● Step 8: Pilih UI Theme, Light atau Dark (Darcula)
setelah itu klik Next
● Step 9: Klik Next, Disini ditampilkan komponen
Android SDK apa saja yang akan di download
● Step 10: Pilih Accept di persetujuan
android-sdk-license dan intel-android-extra-license,
setelah itu klik Finish
● Step 11: Tunggu proses Download Components selesai
karena pada bagian ini memerlukan waktu yang agak
lama, pastikan selalu terhubung dengan internet
● Step 12: Setelah selesai, Klik Finish maka tampilan
Welcome to Android Studio akan terlihat
● Step 13: Buka kembali Windows PowerShell. Jalankan
kembali flutter doctor

Android Studio
berhasil ter install
Install Android
Toolchain
● Step 1: klik More Actions, lalu klik SDK Manager
● Step 2: klik SDK Tools
● Step 3: Pastikan Tools yang ditunjuk panah merah di
bawah sudah tercentang dan terinstall, jika belum maka
masuk ke Step selanjutnya
● Step 4: Centang Tools yang diperlukan, lalu klik
Apply dan klik OK

Klik OK

1
2
● Step 5: Pilih Accept untuk permintaan persetujuan,
lalu klik Next
● Step 6: klik Next, biarkan secara default. Jika ada
permintaan persetujuan pilih Accept, lalu klik Next
● Step 7: klik Finish
● Step 8: Sudah berhasil terinstall, lalu klik Apply
dan klik OK
● Step 9: Buka kembali Windows PowerShell, jalankan
kembali perintah flutter doctor

Jalankan
perintah ini
di Step
berikutnya
● Step 10: Jalankan perintah flutter doctor
--android-licenses, setelah itu akan muncul 6
pertanyaan terkait licenses. Balas semua dengan y
dan tekan Enter
● Step 11: jalankan kembali flutter doctor

Android
Toolchain
berhasil ter
install
Install Visual
Studio Code
● Step 1: Download Visual Studio Code
● Step 2: Double klik file installer yang sudah di
download

Pilih I accept the


agreement, lalu klik
Next
● Step 3: Biarkan pengaturan instalasi secara default

Centang bagian
ini, jika
ingin
menampilkan
ikon VS Code
di desktop,
lalu klik Next

Klik next biarkan pengaturan


nya secara default
● Step 4: klik Install
● Step 5: Pastikan checkbox sudah tercentang, lalu
klik Finish
● Step 6: Install extensions Flutter di Visual Studio
Code

Install yang Pertama. Klik


ini, klik bagian ini, lalu
tombol kita ketikan di
Install yang pencariannya
warna biru flutter
● Step 7: Buka kembali Windows PowerShell jalankan
kembali flutter doctor

Extension Dart
juga otomatis
terinstall VS Code sudah
berhasil
terinstall
Ini biarkan saja, jika kita
tidak melakukan
pengembangan aplikasi untuk
Desktop Windows
Membuat Project
Dart dan Flutter
● Step 1: Pada bagian Menu Bar, pilih View → Command
Palette

Maka akan muncul pencarian, lalu


ketikan dart dan pilih Dart: New
Project
● Step 2: Pilih Console Application, lalu tentukan
dimana kita ingin menyimpan project Dart nya

Klik Select a
folder…
● Step 3: Ketikan nama project Dart nya, lalu tekan
Enter

Pilih Yes, I trust the


authors
● Step 4: Menjalankan project Dart

Klik bagian ini


● Step 1: Pada bagian Menu Bar, pilih View → Command
Palette

Maka akan muncul pencarian, lalu


ketikan flutter dan pilih
Flutter: New Project
● Step 3: Pilih Application, lalu tentukan dimana kita
ingin menyimpan project Flutter nya

Klik Select a folder…


● Step 4: Ketikan nama project Flutter nya, lalu
tekan Enter
Membuat Android
Emulator
● Step 1: Buka Android Studio, klik More Actions →
Virtual Device Manager
● Step 2: Klik Create device, lalu akan muncul list
device yang bisa dibuat

Pilih device yang diinginkan,


contohnya disini Phone → Pixel 4 XL.
Lalu klik Next
● Step 3: Download System Image
● Step 4: Jika System Image sudah terdownload, klik
Finish → klik Next
● Step 5: Biarkan pengaturannya secara default, lalu
klik Finish

Emulator berhasil
dibuat
● Step 6: Menjalankan emulator dari Visual Studio Code

Klik bagian ini, maka


akan muncul pilihan
device yang bisa
digunakan. Pilih Start
Pixel 4 XL API 30
● Step 7: Emulator berhasil dijalankan
● Step 8: Menjalankan project flutter pada emulator

Klik bagian ini untuk menjalankan


project flutter
maka akan muncul box Hot Reload,
Restart, Stop, Flutter Inspector dan
proses saat pertama kali menjalankan
project membutuhkan waktu yang cukup
lama

Jika sudah
berhasil maka
tampilan
emulator nya
menjadi seperti
ini
Selesai

You might also like