Flutter Mobile Development Setup Journey

Complete Flutter Environment Setup Documentation

Dokumentasi ini berisi proses setup Flutter Mobile Development untuk mata kuliah Pemrograman Mobile 2026.

Tujuan:

• Membuat environment Flutter.
• Menggunakan WSL2 sebagai development environment.
• Menghubungkan Flutter dengan Android device fisik.
• Membuat dan menjalankan project Flutter pertama.

⚠️ Perhatian:

• Semua tahapan dalam Dokumentasi ini adalah milik Ilham Firmansyah
• Pentingnya cek Environment dan Folder masing-masing

---

1. Development Environment

Laptop

Owner:
Ilham Firmansyah

OS:
Windows 11

Processor:
AMD Ryzen 3 3250U with Radeon Graphics (2.60 GHz)

RAM:
16,0 GB (13,9 GB usable)

Storage:
307 GB of 477 GB used

Environment:
WSL2 Ubuntu

Editor:
Visual Studio Code

Laptop digunakan untuk:

• Menjalankan Windows.
• Menjalankan WSL2.
• Coding Flutter.
• Build aplikasi Android.

---

Android Device

Owner:
Ilham Firmansyah

Device:
POCO X3 NFC

Model:
M2007J20CG

Android:
Android 12

API:
31

Digunakan sebagai:

• Device testing Flutter.
• Pengganti Android Emulator (Android Studio).
• Media debugging.

---

2. Architecture

Windows Laptop
      |
      |
     WSL2
      |
      |
Flutter SDK + Android SDK
      |
      |
 USB Connection
      |
      |
POCO X3 NFC

---

3. WSL2 Setup

Cek WSL melalui Windows PowerShell:

wsl -l -v

Pastikan:

Ubuntu VERSION 2

---

4. Windows PowerShell dan Ubuntu WSL

PowerShell digunakan untuk:

• Instalasi usbipd.
• Menghubungkan USB device.
• Konfigurasi Windows.

Contoh:

usbipd list

Ubuntu WSL digunakan untuk:

• Flutter.
• Dart.
• Android SDK.
• Git.

Contoh:

flutter doctor

---

5. User Development

Awalnya WSL menggunakan root.

Cek:

whoami

Disarankan menggunakan user biasa agar:

• Permission aman.
• Git tidak bermasalah.
• Project mudah dikelola.

Cek user:

cat /etc/passwd | grep /home

Masuk user:

su - ilhamfirmansyah

⚠️ Catatan:

• Sesuaikan dengan username masing masing

---

6. Folder Structure

Folder utama:

/home/ilhamfirmansyah/perkuliahan/pemrograman_mobile

⚠️ Catatan:

• Sesuaikan dengan folder masing masing

Struktur:

pemrograman_mobile

├── flutter
├── Android
└── project_flutter

---

7. Java Setup

Flutter Android membutuhkan Java.

Versi:

OpenJDK 17

Cek:

java -version
javac -version

Set:

export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64"

Tambahkan permanen:

echo 'export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64"' >> ~/.zshrc

---

8. Flutter Installation

Install dependency:

sudo apt install -y curl git unzip xz-utils zip libglu1-mesa

Download Flutter:

cd ~/perkuliahan/pemrograman_mobile

git clone https://github.com/flutter/flutter.git -b stable --depth 1

Lokasi:

/home/ilhamfirmansyah/perkuliahan/pemrograman_mobile/flutter

Tambahkan environment:

export FLUTTER_HOME="/home/ilhamfirmansyah/perkuliahan/pemrograman_mobile/flutter"

export PATH="$FLUTTER_HOME/bin:$PATH"

Cek:

flutter --version

---

9. Android SDK

Android SDK digunakan untuk build aplikasi Android.

Lokasi:

/home/ilhamfirmansyah/perkuliahan/pemrograman_mobile/Android

Environment:

export ANDROID_HOME="/home/ilhamfirmansyah/perkuliahan/pemrograman_mobile/Android"

export PATH="$ANDROID_HOME/platform-tools:$PATH"

---

10. Flutter Doctor

Jalankan:

flutter doctor -v

Target:

[✓] Flutter

[✓] Android toolchain

[✓] Connected device

---

11. VS Code WSL

Install extension:

• WSL
• Remote Development
• Flutter
• Dart

Buka project dari WSL:

code .

Pastikan VS Code menunjukkan:

WSL: Ubuntu

Letaknya di pojok kiri Visual Studio Code

---

12. Membuat Project Flutter

Masuk folder:

cd ~/perkuliahan/pemrograman_mobile

Buat project:

flutter create hello_world

Ini sesuaikan dengan nama projecy yang mau kamu buat

Masuk:

cd hello_world

---

13. Connect Android Device

Aktifkan pada POCO X3 NFC:

• Developer Options.
• USB Debugging.
• File Transfer Mode.

⚠️ Catatan:

• Selalu pantau layar HP karena akan ada Layar Popup sewaktu-waktu

---

14. Install USBIPD

Dilakukan melalui Windows PowerShell:

winget install --interactive --exact dorssel.usbipd-win

---

15. Hubungkan HP ke WSL

Cek:

usbipd list

Contoh:

BUSID 1-3 POCO X3 NFC

Share:

usbipd bind --busid 1-3

Attach:

usbipd attach --wsl --busid 1-3

BUSID setiap komputer dapat berbeda.

---

16. Cek ADB

Pada WSL:

adb devices

Jika berhasil:

b9c129d0 device

---

17. Flutter Device

Cek:

flutter devices

Output:

M2007J20CG (mobile)
Android 12

---

18. Run Flutter

Masuk project:

cd ~/perkuliahan/pemrograman_mobile/hello_world

Jalankan:

flutter run

---

19. Flutter Run Command

Saat aplikasi berjalan:

Command	Fungsi
r	Hot Reload
R	Hot Restart
q	Stop aplikasi
d	Detach

---

20. Git Workflow (repository masing-masing github)

Inisialisasi:

git init

Tambah:

git add .

Commit:

git commit -m "message"

Push:

git push

---

21. Daily Workflow

Setiap mulai coding:

Windows PowerShell

Hubungkan HP:

usbipd attach --wsl --busid 1-3

WSL

Masuk user:

su - ilhamfirmansyah

Masuk project:

cd ~/perkuliahan/pemrograman_mobile/nama_project

Run:

flutter run

---

Final Status

✓ WSL2 Ubuntu

✓ Java JDK 17

✓ Flutter SDK

✓ Android SDK

✓ VS Code WSL

✓ GitHub

✓ POCO X3 NFC Connected

✓ Flutter App Running

Selamattt

Environment siap digunakan untuk pembelajaran Flutter Mobile Development.