Hari 2: Memahami Struktur Folder Project Flutter dan Menjalankan Emulator

Fri, May 2025 14:32:11

Halo teman-teman, di hari kedua belajar Flutter bareng, kita akan bahas sesuatu yang sangat penting dan fundamental banget, yaitu struktur folder dari project Flutter. Selain itu, kita juga akan belajar cara menjalankan aplikasi Flutter di emulator dan device fisik. Artikel ini cocok banget buat kalian yang baru mulai ngoding Flutter, apalagi kalau kalian udah ngikutin materi hari pertama kemarin. Jadi, yuk kita mulai!

Kenapa Harus Paham Struktur Folder Flutter?

Kalau kalian pernah ngoding pake framework lain seperti Laravel, React, atau Android Native, pasti sadar kalau setiap framework punya struktur folder-nya masing-masing. Nah, Flutter juga punya. Dengan paham struktur ini, kita jadi:

• Lebih gampang navigasi di dalam project.
• Tau harus taruh file di mana.
• Bisa kerja tim dengan lebih rapi.
• Paham kenapa sesuatu bisa error karena tahu alur program.

Struktur Dasar Project Flutter

Waktu kita bikin project baru Flutter pakai perintah:

flutter create nama_project

Kita akan dapet struktur folder seperti ini:

nama_project/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml
├── .gitignore
├── .metadata
└── README.md

Mari kita bahas satu per satu bagian pentingnya:

1. main.dart

Ini adalah entry point dari aplikasi Flutter kita. Di sini kita biasanya akan memanggil fungsi runApp() dan ngeload widget utama kita. Contohnya:

void main() {
  runApp(MyApp());
}

File ini letaknya ada di folder lib/. Semua kode Dart utama kita juga biasanya ditaruh di folder lib/ ini.

2. pubspec.yaml

File ini kayaknya sering banget bikin bingung pemula. Padahal ini penting banget!

Isinya adalah konfigurasi project kita, mulai dari:

• Nama dan versi aplikasi.
• Dependencies (package yang kita pake).
• Asset (gambar, font, dll).

Contoh bagian isi:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

flutter:
  assets:
    - assets/images/

Kalau kita nambah package atau gambar, jangan lupa save file dan jalankan:

flutter pub get

3. lib/

Ini adalah folder utama tempat kita nulis semua kode Dart kita. Biasanya isi folder lib/ ini diatur lagi supaya lebih modular. Contoh struktur:

lib/
├── main.dart
├── screens/
├── widgets/
├── models/
└── utils/

• screens/: berisi halaman-halaman aplikasi.
• widgets/: kumpulan komponen kecil yang bisa dipakai ulang.
• models/: tempat class data/model kita.
• utils/: helper/helper fungsi tambahan.

4. android/ dan ios/

Folder ini adalah tempat konfigurasi native platform masing-masing. Misalnya:

• Tambah permission.
• Ganti nama package.
• Build ke APK/IPA.

Jarang banget kita ngubah ini kecuali untuk kebutuhan khusus kayak integrasi Firebase, ganti icon, atau permission.

5. test/

Folder ini disediakan untuk nulis unit test atau widget test. Walaupun belum terlalu kepake di awal-awal belajar, tapi sebaiknya kita mulai biasakan nulis test.

Cara Menjalankan Emulator atau Device Fisik

Sekarang setelah paham struktur, yuk kita jalanin aplikasinya. Caranya ada dua: pakai emulator atau device fisik.

A. Menjalankan Emulator

1. Buka Android Studio atau VS Code.
2. Pastikan Android Emulator sudah di-setup:
   • Android Studio > Device Manager > Create Device.
3. Jalankan emulator dari Device Manager atau terminal:

emulator -avd nama_emulator

4. Setelah emulator nyala, jalankan app kita:

flutter run

B. Menjalankan di Device Fisik (Android)

1. Aktifkan Developer Mode dan USB Debugging di HP kamu.
2. Sambungkan ke laptop dengan kabel USB.
3. Jalankan perintah:

flutter devices

Kalau device terdeteksi, kamu bisa langsung jalankan:

flutter run

Atau bisa juga pilih device-nya di bagian bawah VS Code / Android Studio.

Tips Debugging:

• Kalau muncul error permission di Linux/macOS:

sudo chmod +x path_ke_flutter/bin/flutter

• Coba restart adb:

adb kill-server
adb start-server

Penutup

Di hari kedua ini kita udah belajar:

• Struktur folder Flutter: lib/, pubspec.yaml, main.dart, android/, ios/, test/.
• Cara menjalankan aplikasi di emulator maupun device fisik.

Kedengarannya mungkin banyak banget, tapi kalau kalian udah sering pakai, ini akan jadi hal yang natural banget. Di hari-hari berikutnya, kita akan mulai masuk ke UI dan logika aplikasi.

Sampai jumpa di hari ketiga! Jangan lupa commit project kalian ke Git ya.

Follow terus seri #BelajarFlutter biar gak ketinggalan materi selanjutnya!