Struktur Project Flutter: Fungsi Folder dan File untuk Pemula

Setelah berhasil melakukan setup Flutter development environment pada Level 3, langkah berikutnya adalah memahami struktur project Flutter.

Ketika pertama kali menjalankan perintah:

flutter create my_app

Flutter akan membuat berbagai folder dan file secara otomatis.

Bagi pemula, struktur tersebut mungkin terlihat membingungkan karena terdapat folder seperti android, ios, lib, web, test, hingga file seperti pubspec.yaml, analysis_options.yaml, dan berbagai file konfigurasi lainnya.

Pertanyaannya:

Folder mana yang sebenarnya digunakan untuk menulis kode?

Apa fungsi lib/main.dart?

Untuk apa pubspec.yaml?

Apakah folder android dan ios harus diedit?

Apa perbedaan lib, test, build, dan .dart_tool?

Memahami struktur project merupakan kemampuan dasar yang penting sebelum mulai belajar widget Flutter.

Jika Anda mengetahui fungsi setiap bagian project, Anda tidak hanya bisa mengikuti tutorial, tetapi juga mulai memahami bagaimana sebuah aplikasi Flutter disusun.

Dalam artikel Level 4 — Memahami Struktur Project Flutter ini, kita akan membahas struktur project Flutter dari dasar, fungsi folder dan file penting, cara kerja main.dart, dependency, asset, serta contoh struktur project yang lebih rapi untuk aplikasi yang mulai berkembang.

Memahami struktur project Flutter merupakan pembelajaran Level 4 dari Roadmap Belajar Flutter dari Nol Sampai Siap Kerja yang dibahas pada situs Raja Putra Media.

Apa Itu Struktur Project Flutter?

Struktur project Flutter adalah susunan folder dan file yang digunakan untuk menyimpan source code, konfigurasi, asset, pengujian, serta komponen platform dari sebuah aplikasi Flutter.

Ketika Anda membuat project baru dengan:

flutter create my_app

Flutter akan menghasilkan struktur awal yang dapat langsung digunakan untuk pengembangan aplikasi.

Secara sederhana, sebuah project Flutter dapat digambarkan seperti ini:

my_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── web/
├── linux/
├── macos/
├── windows/
├── pubspec.yaml
├── analysis_options.yaml
├── .gitignore
├── README.md
└── ...

Tidak semua file dan folder tersebut harus Anda ubah secara manual.

Sebagai pemula, bagian yang paling penting untuk dipahami terlebih dahulu adalah:

lib/
main.dart
pubspec.yaml
test/
asset/

Sedangkan folder platform seperti android, ios, web, dan desktop lebih banyak berhubungan dengan target platform tertentu.

Flutter sendiri menjelaskan bahwa lib/main.dart merupakan entry point aplikasi Flutter, sedangkan struktur project yang dihasilkan oleh flutter create menyediakan folder platform dan source code untuk memulai pengembangan.

Gambaran Besar Struktur Project Flutter

Sebelum membahas satu per satu, mari lihat gambaran sederhana struktur project Flutter di bawah ini.

my_app/
│
├── android/              → konfigurasi Android
├── ios/                  → konfigurasi iOS
├── web/                  → konfigurasi Flutter Web
├── linux/                → konfigurasi Linux
├── macos/                → konfigurasi macOS
├── windows/              → konfigurasi Windows
│
├── lib/                  → source code utama
│   └── main.dart         → entry point aplikasi
│
├── test/                 → testing
│
├── build/                → hasil build
├── .dart_tool/           → file internal tooling
│
├── pubspec.yaml          → konfigurasi project & dependency
├── pubspec.lock          → versi dependency yang digunakan
├── analysis_options.yaml → aturan analisis/lint
├── .gitignore            → file yang diabaikan Git
└── README.md             → dokumentasi project

Struktur tersebut dapat berkembang seiring ukuran aplikasi bertambah. Project sederhana mungkin hanya membutuhkan beberapa file di dalam lib.

Project yang lebih kompleks dapat memiliki:

lib/
├── core/
├── models/
├── services/
├── repositories/
├── screens/
├── widgets/
└── ...

Namun, jangan terburu-buru membuat struktur yang terlalu kompleks.

Pada tahap Level 4, fokus utama Anda adalah memahami fungsi setiap bagian project terlebih dahulu.

1. Folder lib/

Jika ada satu folder yang harus paling Anda kenal dalam project Flutter, jawabannya adalah:

lib/

Folder lib merupakan tempat utama untuk source code Dart aplikasi.

Di dalam project baru, Anda biasanya akan menemukan:

lib/
└── main.dart

Ketika aplikasi mulai berkembang, folder ini dapat berisi berbagai file dan folder lain.

Contohnya:

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

Dokumentasi Flutter menjelaskan bahwa kode aplikasi utama berada di lib, dan main.dart menjadi entry point aplikasi.

2. Apa Itu main.dart?

File:

lib/main.dart

merupakan salah satu file paling penting dalam aplikasi Flutter.

Pada aplikasi Flutter, eksekusi program dimulai dari function:

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

Function main() merupakan entry point program Dart.

Sedangkan:

runApp()

digunakan untuk menjalankan aplikasi Flutter dengan sebuah widget sebagai root widget.

Contoh sederhana:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    );
  }
}

Alurnya dapat dibayangkan seperti:

main()
   ↓
runApp()
   ↓
MyApp
   ↓
MaterialApp
   ↓
Scaffold
   ↓
Center
   ↓
Text

Inilah awal dari konsep widget tree yang nantinya akan menjadi salah satu konsep penting dalam Flutter.

Dokumentasi resmi Flutter juga menunjukkan pola main() → runApp() → root widget sebagai struktur dasar aplikasi Flutter.

3. Apakah Semua Kode Harus Ditulis di main.dart?

Tidak. Ini merupakan salah satu kesalahan umum pemula.

Pada project sederhana, Anda mungkin masih menulis sebagian besar kode di:

lib/main.dart

Tetapi ketika aplikasi semakin besar, menempatkan seluruh kode dalam satu file akan membuat project sulit dibaca dan dipelihara.

Misalnya:

main.dart

berisi:

• login,
• dashboard,
• profile,
• produk,
• API,
• database,
• form,
• widget,
• helper,
• dan berbagai logic lainnya.

File tersebut akhirnya menjadi sangat panjang. Karena itu, kode biasanya dipecah menjadi beberapa file.

Contoh:

lib/
├── main.dart
├── screens/
│   ├── home_screen.dart
│   ├── login_screen.dart
│   └── profile_screen.dart
│
├── widgets/
│   ├── app_button.dart
│   └── product_card.dart
│
└── models/
    └── product.dart

Dengan struktur tersebut, setiap bagian aplikasi memiliki tempat yang lebih jelas.

4. Folder android/

Folder:

android/

berisi bagian project yang berkaitan dengan platform Android.

Contohnya dapat mencakup:

• konfigurasi Gradle,
• Android manifest,
• konfigurasi aplikasi,
• resource Android,
• kode native Android tertentu.

Jika Anda membangun aplikasi Flutter untuk Android, folder ini digunakan ketika Flutter melakukan proses build aplikasi Android.

Namun, sebagai pemula:

Anda tidak perlu langsung mengedit isi folder android/.

Sebagian besar kebutuhan Flutter sehari-hari dapat dikerjakan melalui kode Dart di dalam lib.

Anda biasanya mulai menyentuh bagian Android ketika membutuhkan konfigurasi khusus, integrasi native, permission tertentu, atau pengaturan build.

5. Folder ios/

Folder:

ios/

berisi bagian project yang berkaitan dengan platform iOS.

Fungsinya mirip dengan folder android/, tetapi ditujukan untuk ekosistem Apple.

Contohnya dapat berkaitan dengan:

• konfigurasi aplikasi iOS,
• project Xcode,
• native integration,
• permission,
• build configuration.

Jika target Anda adalah Android saja, Anda mungkin jarang menyentuh folder ini pada tahap awal. Namun folder tersebut tetap menjadi bagian penting dari project Flutter cross-platform.

6. Folder web/

Jika project Flutter Anda mendukung Web, Anda akan menemukan:

web/

Folder tersebut berisi konfigurasi dan entrypoint yang berkaitan dengan aplikasi Flutter Web.

Flutter memungkinkan satu codebase digunakan untuk berbagai platform, termasuk Android, iOS, web, serta desktop. Karena itu, project Flutter dapat memiliki folder platform yang berbeda sesuai target yang dipilih ketika project dibuat.

7. Folder windows/

Folder:

windows/

digunakan untuk konfigurasi aplikasi Flutter yang ditargetkan ke Windows.

Jika aplikasi Anda hanya dibuat untuk Android, Anda tidak perlu menghabiskan banyak waktu memahami folder ini pada tahap awal. Namun jika suatu saat aplikasi dikembangkan sebagai desktop application, folder tersebut akan menjadi relevan.

8. Folder macos/

Folder:

macos/

digunakan untuk konfigurasi target macOS.

Fungsinya mirip dengan folder:

windows/
linux/

tetapi khusus untuk aplikasi desktop macOS.

9. Folder linux/

Folder:

linux/

digunakan untuk konfigurasi aplikasi Flutter yang berjalan pada Linux desktop.

Dengan dukungan multiplatform Flutter, satu project dapat memiliki beberapa folder platform.

10. Folder test/

Folder:

test/

digunakan untuk menyimpan kode pengujian.

Contohnya:

test/
├── widget_test.dart
└── ...

Testing digunakan untuk memastikan aplikasi bekerja sesuai dengan yang diharapkan.

Pada tahap awal belajar Flutter, Anda mungkin belum banyak menulis automated test. Namun jangan menganggap folder ini tidak penting.

Ketika aplikasi mulai berkembang dan digunakan oleh banyak pengguna, testing menjadi semakin penting. Flutter menyediakan berbagai pendekatan testing, termasuk unit test, widget test, dan integration test.

Untuk integration test, Flutter menggunakan directory khusus bernama:

integration_test/

bukan sekadar folder test/.

11. Apa Itu pubspec.yaml?

Jika lib adalah tempat utama source code, maka:

pubspec.yaml

merupakan salah satu file konfigurasi terpenting dalam project Flutter.

File ini digunakan untuk mendefinisikan berbagai informasi project, termasuk:

• nama project,
• versi aplikasi,
• environment SDK,
• dependency,
• asset,
• font,
• konfigurasi Flutter tertentu.

Contoh sederhana:

name: my_app

description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ^3.13.0

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

Dokumentasi Flutter menjelaskan bahwa setiap project Dart, termasuk aplikasi Flutter, memiliki pubspec.yaml, dan file ini berisi metadata serta dependency project.

12. Dependency dalam pubspec.yaml

Salah satu fungsi paling penting pubspec.yaml adalah mendefinisikan dependency. Misalnya Anda ingin menggunakan package tertentu.

Dependency dapat ditambahkan ke:

dependencies:

Contoh:

dependencies:
  flutter:
    sdk: flutter

  http: ^1.0.0

Setelah dependency ditambahkan, Anda dapat menjalankan:

flutter pub get

Flutter kemudian akan mengambil dependency yang diperlukan. Inilah salah satu alasan mengapa pubspec.yaml sangat penting dalam project Flutter.

13. Asset di pubspec.yaml

Selain dependency, pubspec.yaml juga dapat digunakan untuk mendaftarkan asset.

Misalnya project memiliki:

assets/
└── images/
    └── logo.png

Anda dapat mendeklarasikannya:

flutter:
  assets:
    - assets/images/logo.png

Setelah itu, asset dapat digunakan dari aplikasi.

Contohnya:

Image.asset('assets/images/logo.png')

Dokumentasi Flutter menjelaskan bahwa field assets pada pubspec.yaml digunakan untuk mendaftarkan asset yang akan dibundel bersama aplikasi.

14. Font pada pubspec.yaml

Custom font juga dapat didaftarkan melalui pubspec.yaml.

Contoh:

flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: fonts/MyFont-Regular.ttf

Kemudian font dapat digunakan dalam aplikasi melalui konfigurasi TextStyle. Namun untuk tahap awal, Anda tidak perlu terlalu fokus pada konfigurasi font.

Pahami terlebih dahulu bahwa:

pubspec.yaml merupakan salah satu pusat konfigurasi project Flutter.

15. Apa Itu pubspec.lock?

Selain:

pubspec.yaml

Anda mungkin menemukan:

pubspec.lock

File ini menyimpan versi dependency yang telah dipilih oleh package manager untuk project.

Misalnya Anda memiliki dependency:

http: ^1.0.0

Range tersebut memungkinkan resolver memilih versi yang kompatibel.

pubspec.lock membantu mencatat versi konkret yang digunakan dalam project sehingga environment dapat lebih konsisten.

Dokumentasi Flutter menjelaskan bahwa pubspec.lock dibuat ketika project pertama kali dibangun dan mencatat versi package yang digunakan.

Sebagai pemula:

Jangan mengedit pubspec.lock secara manual tanpa alasan yang jelas.

Biasanya dependency dikelola melalui pubspec.yaml dan command Flutter/Dart.

16. Apa Itu Folder .dart_tool/?

Anda mungkin melihat folder:

.dart_tool/

Folder ini digunakan oleh Dart dan Flutter tooling untuk menyimpan berbagai informasi internal yang diperlukan oleh toolchain.

Contohnya berkaitan dengan:

• package configuration,
• dependency resolution,
• tooling,
• berbagai metadata internal.

Sebagai pemula:

Anda tidak perlu mengedit isi .dart_tool/ secara manual.

Folder tersebut dihasilkan dan dikelola oleh tooling. Jika Anda belum memahami fungsinya secara mendalam, cukup anggap sebagai:

Folder internal yang membantu Dart dan Flutter mengelola project.

17. Apa Itu Folder build/?

Setelah menjalankan project atau melakukan proses build, Anda mungkin menemukan:

build/

Folder ini berisi berbagai hasil atau file sementara yang dihasilkan selama proses build.

Contohnya dapat mencakup hasil kompilasi atau artefak build untuk target tertentu. Karena folder ini bersifat generated output, Anda biasanya tidak perlu menulis source code di dalamnya.

Jika project Anda memiliki:

build/

jangan menganggap folder tersebut sebagai tempat utama aplikasi.

Source code Anda tetap berada di:

lib/

18. Apa Itu analysis_options.yaml?

File:

analysis_options.yaml

digunakan untuk mengatur aturan analisis kode Dart.

Misalnya project dapat menggunakan lint rules untuk membantu menemukan potensi masalah atau menjaga konsistensi kode.

Contohnya:

include: package:flutter_lints/flutter.yaml

Lint membantu memberikan peringatan mengenai pola kode tertentu yang dianggap kurang baik atau berpotensi menimbulkan masalah.

Dengan kata lain:

Source Code
     ↓
Dart Analyzer
     ↓
Lint / Warning

Fitur ini sangat membantu ketika project mulai berkembang.

19. Apa Itu .gitignore?

File:

.gitignore

berhubungan dengan Git.

Git digunakan untuk version control.

.gitignore menentukan file atau folder tertentu yang tidak perlu dimasukkan ke repository Git. Misalnya file hasil build atau file tooling tertentu biasanya tidak perlu disimpan sebagai source code utama.

Contoh konsepnya:

Source code
    ↓
Git
    ↓
Repository

sedangkan file generated tertentu dapat dikecualikan melalui:

.gitignore

Memahami .gitignore akan semakin penting ketika Anda mulai mempelajari Git dan GitHub pada level yang lebih lanjut dalam roadmap.

20. Apa Itu README.md?

File:

README.md

merupakan dokumentasi project.

Anda dapat menggunakannya untuk menjelaskan:

• nama aplikasi,
• tujuan project,
• cara menjalankan aplikasi,
• dependency,
• fitur,
• konfigurasi,
• informasi developer,
• dan informasi lain yang diperlukan.

Untuk project portfolio, README yang baik sangat membantu orang lain memahami project Anda.

Misalnya:

# My App

Aplikasi mobile sederhana menggunakan Flutter.

## Features

- Login
- Dashboard
- Profile

## How to Run

flutter pub get
flutter run

Nantinya, ketika Anda mulai membuat portfolio Flutter, README akan menjadi bagian yang cukup penting.

21. Mengapa Ada Banyak Folder Platform?

Salah satu keunggulan Flutter adalah kemampuan membuat aplikasi untuk berbagai platform menggunakan satu codebase.

Secara sederhana:

                 Flutter Code
                     │
          ┌──────────┼──────────┐
          ↓          ↓          ↓
       Android      iOS        Web
          │          │          │
       android/     ios/       web/

Project yang mengaktifkan target desktop juga dapat memiliki:

windows/
macos/
linux/

Ini memungkinkan kode aplikasi utama tetap berada di:

lib/

sementara konfigurasi platform tertentu berada pada folder masing-masing.

Namun perlu diingat: Cross-platform bukan berarti semua kode platform benar-benar identik. Kadang aplikasi membutuhkan konfigurasi atau integrasi native tertentu.

22. Folder Mana yang Paling Sering Digunakan?

Untuk pemula, jangan merasa harus menguasai seluruh folder sekaligus.

Prioritaskan seperti ini:

Sangat penting

lib/
main.dart
pubspec.yaml

Penting setelah mulai testing

test/

Penting ketika memahami version control

.gitignore
README.md

Perlu diketahui, tetapi tidak perlu sering diedit

android/
ios/
web/
windows/
macos/
linux/

Generated / internal

build/
.dart_tool/

Dengan prioritas tersebut, proses belajar akan terasa lebih sederhana.

Struktur Project Flutter Sederhana

Pada tahap awal, struktur project tidak perlu dibuat rumit.

Contohnya:

lib/
├── main.dart
├── screens/
│   ├── home_screen.dart
│   └── profile_screen.dart
├── widgets/
│   └── custom_button.dart
└── models/
    └── user.dart

Struktur tersebut sudah cukup untuk project latihan sederhana.

Pembagian tersebut memiliki konsep:

screens/
→ halaman aplikasi

widgets/
→ komponen UI yang dapat digunakan kembali

models/
→ representasi data

main.dart
→ entry point aplikasi

Ini bukan satu-satunya struktur yang benar. Struktur project dapat disesuaikan dengan ukuran dan kebutuhan aplikasi.

Struktur Project Flutter Berdasarkan Feature

Ketika aplikasi mulai lebih besar, pendekatan berdasarkan fitur dapat menjadi pilihan.

Contohnya:

lib/
├── main.dart
│
├── features/
│   ├── auth/
│   │   ├── login_screen.dart
│   │   ├── register_screen.dart
│   │   └── auth_service.dart
│   │
│   ├── home/
│   │   ├── home_screen.dart
│   │   └── home_widget.dart
│   │
│   └── profile/
│       ├── profile_screen.dart
│       └── profile_service.dart
│
└── core/
    ├── constants/
    ├── theme/
    └── widgets/

Keuntungan pendekatan feature-based adalah file yang berkaitan dengan satu fitur dapat dikelompokkan bersama.

Dokumentasi arsitektur Flutter juga menunjukkan bahwa organisasi berdasarkan feature merupakan salah satu pendekatan yang populer, terutama ketika aplikasi mulai berkembang.

Jangan Terlalu Cepat Menggunakan Struktur Kompleks

Sebagai pemula, Anda mungkin menemukan tutorial dengan struktur seperti:

lib/
├── core/
├── config/
├── data/
├── domain/
├── presentation/
├── repositories/
├── services/
├── view_models/
└── ...

Struktur tersebut tidak salah.

Namun, Anda tidak harus langsung menggunakannya untuk aplikasi sederhana. Jika aplikasi Anda hanya memiliki beberapa halaman, struktur terlalu kompleks justru dapat membuat Anda bingung.

Prinsip sederhananya:

Struktur project harus membantu developer, bukan membuat developer kesulitan.

Flutter sendiri menekankan separation of concerns sebagai prinsip penting dalam merancang aplikasi, tetapi struktur arsitektur perlu disesuaikan dengan kompleksitas aplikasi.

Memahami Separation of Concerns

Ketika project mulai berkembang, Anda perlu mulai mengenal konsep: Separation of Concerns.

Artinya, setiap bagian kode sebaiknya memiliki tanggung jawab yang jelas.

Contoh buruk:

main.dart
├── UI
├── API
├── database
├── authentication
├── business logic
├── validation
└── helper

Semua dicampur dalam satu file.

Contoh yang lebih terorganisasi:

lib/
├── screens/
├── widgets/
├── services/
├── models/
└── repositories/

Dengan demikian:

UI
↓
menampilkan interface

Service
↓
berkomunikasi dengan sumber eksternal

Model
↓
merepresentasikan data

Repository
↓
mengelola sumber data

Konsep ini akan menjadi sangat penting ketika Anda mulai mempelajari architecture Flutter pada level yang lebih tinggi.

Memahami Hubungan main.dart dan Widget

Mari kembali ke file paling penting:

lib/main.dart

Misalnya:

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

Kemudian:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

Kemudian:

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}

Alurnya:

main.dart
   ↓
main()
   ↓
runApp()
   ↓
MyApp
   ↓
MaterialApp
   ↓
HomeScreen
   ↓
Scaffold
   ↓
Text

Ini merupakan gambaran awal widget tree. Pada Level 5, konsep widget akan dibahas lebih mendalam.

Bagaimana Dependency Bekerja?

Misalnya Anda ingin menggunakan package HTTP.

Anda menambahkan dependency pada:

dependencies:
  http: ^1.0.0

Kemudian:

flutter pub get

Setelah itu, Anda dapat menggunakannya:

import 'package:http/http.dart' as http;

Alurnya:

pubspec.yaml
     ↓
flutter pub get
     ↓
Dependency
     ↓
Dapat digunakan oleh source code

Jadi ketika Anda menemukan sebuah package dalam tutorial Flutter, salah satu hal pertama yang perlu Anda cari adalah bagaimana package tersebut didefinisikan dalam pubspec.yaml.

Contoh Struktur Project Flutter untuk Pemula

Berikut contoh struktur yang cukup ideal untuk project latihan:

my_app/
│
├── android/
├── ios/
├── web/
│
├── lib/
│   ├── main.dart
│   │
│   ├── screens/
│   │   ├── home_screen.dart
│   │   ├── login_screen.dart
│   │   └── profile_screen.dart
│   │
│   ├── widgets/
│   │   ├── app_button.dart
│   │   └── product_card.dart
│   │
│   └── models/
│       └── product.dart
│
├── test/
│
├── pubspec.yaml
├── pubspec.lock
├── analysis_options.yaml
├── .gitignore
└── README.md

Untuk pemula, struktur seperti ini sudah cukup untuk membantu membedakan:

• halaman,
• widget,
• data,
• entry point,
• testing,
• konfigurasi.

Contoh Struktur Project yang Lebih Besar

Ketika aplikasi semakin kompleks, struktur dapat berkembang menjadi:

lib/
├── main.dart
│
├── core/
│   ├── constants/
│   ├── theme/
│   ├── routing/
│   └── widgets/
│
├── data/
│   ├── models/
│   ├── repositories/
│   └── services/
│
├── features/
│   ├── auth/
│   ├── home/
│   ├── products/
│   └── profile/
│
└── utils/

Ini hanya contoh. Tidak ada satu struktur folder yang wajib digunakan untuk semua aplikasi Flutter.

Flutter sendiri memberikan panduan arsitektur yang memisahkan UI dan data layer, dengan komponen seperti views, view models, repositories, dan services. Untuk aplikasi yang lebih kompleks, domain/logic layer juga dapat digunakan.

Namun pembahasan mendalam tentang architecture akan lebih tepat dilakukan pada level lanjutan dalam roadmap.

File yang Sebaiknya Tidak Diedit Sembarangan

Sebagai pemula, Anda sebaiknya berhati-hati ketika mengubah:

.dart_tool/
build/
pubspec.lock

dan file konfigurasi platform seperti:

android/
ios/

bukan karena file-file tersebut tidak penting, tetapi karena kesalahan perubahan konfigurasi dapat menyebabkan project tidak dapat di-build.

Fokus utama Anda pada tahap awal:

lib/
pubspec.yaml
test/

Cara Membaca Project Flutter yang Belum Pernah Anda Lihat

Kemampuan penting seorang developer bukan hanya membuat project baru, tetapi juga memahami project milik orang lain. Ketika mendapatkan project Flutter baru, jangan langsung membuka semua file.

Gunakan urutan berikut:

Langkah 1

Buka:

pubspec.yaml

Cari tahu:

• nama project,
• versi,
• dependency,
• asset.

Langkah 2

Buka:

lib/main.dart

Cari:

void main()

Kemudian lihat widget root aplikasi.

Langkah 3

Periksa struktur:

lib/

Cari:

• screens,
• features,
• widgets,
• models,
• services,
• repositories.

Langkah 4

Lihat:

test/

untuk mengetahui bagaimana aplikasi diuji.

Langkah 5

Baru periksa:

android/
ios/
web/

jika Anda membutuhkan konfigurasi platform tertentu. Cara ini jauh lebih efektif daripada membuka semua file secara acak.

Mini Practice: Membuat Struktur Project Sendiri

Sekarang coba buat project baru:

flutter create belajar_flutter

Masuk ke folder:

cd belajar_flutter

Kemudian buka project menggunakan VS Code.

Cari:

lib/main.dart

Ubah teks aplikasi menjadi:

Text('Belajar Flutter')

Kemudian buat folder:

lib/screens/

Buat file:

lib/screens/home_screen.dart

Kemudian pindahkan halaman utama ke file tersebut. Tujuan latihan ini bukan membuat aplikasi kompleks.

Tujuannya adalah membiasakan diri dengan:

Project
   ↓
lib
   ↓
main.dart
   ↓
screens
   ↓
file Dart lainnya

Checklist Level 4

Sebelum melanjutkan ke Level 5, pastikan Anda sudah memahami hal berikut.

Struktur Dasar

• Memahami fungsi folder lib.
• Memahami fungsi main.dart.
• Memahami fungsi android.
• Memahami fungsi ios.
• Memahami fungsi web.
• Mengetahui fungsi folder desktop seperti windows, macos, dan linux.
• Memahami fungsi test.

Konfigurasi

• Memahami pubspec.yaml.
• Memahami dependency.
• Memahami asset.
• Mengetahui fungsi pubspec.lock.
• Mengetahui fungsi analysis_options.yaml.

Project Management

• Mengetahui fungsi .gitignore.
• Mengetahui fungsi README.md.
• Mengetahui bahwa .dart_tool dan build merupakan bagian generated/internal.

Source Code

• Mengetahui entry point aplikasi.
• Memahami fungsi main().
• Memahami fungsi runApp().
• Memahami konsep awal widget tree.
• Dapat membuat file Dart baru di dalam lib.

Jika Anda sudah memahami bagian tersebut, Anda tidak lagi melihat project Flutter sebagai kumpulan folder yang membingungkan.

Anda sudah mulai memahami bagaimana sebuah aplikasi Flutter disusun.

Apa yang Dipelajari di Level 5?

Setelah memahami struktur project, sekarang waktunya masuk ke salah satu konsep paling penting dalam Flutter, yaitu Widget.

Pada Level 5, Anda akan mulai mempelajari:

• apa itu widget,
• StatelessWidget,
• StatefulWidget,
• MaterialApp,
• Scaffold,
• Container,
• Row,
• Column,
• Text,
• Image,
• Icon,
• ListView,
• widget tree,
• BuildContext,
• dan bagaimana menggabungkan widget menjadi interface aplikasi.

Jika Level 4 menjawab:

"Di mana saya menulis kode Flutter?"

maka Level 5 akan menjawab:

"Bagaimana saya membangun tampilan aplikasi Flutter?"

Roadmap Belajar Flutter Setelah Memahami Struktur Project

Perjalanan Anda sekarang menjadi:

Level 0 - Memahami Flutter & Ekosistem
        ↓
Level 1 - Dasar Pemrograman
        ↓
Level 2 - Belajar Dart
        ↓
Level 3 - Setup Flutter Development Environment
        ↓
Level 4 - Memahami Struktur Project Flutter
        ↓
Level 5 - Mengenal Widget Flutter
        ↓
Level 6 - Membuat Responsive UI
        ↓
Level 7 - Navigation & State Management
        ↓
Level 8 - Integrasi REST API
        ↓
Level 9 - Database
        ↓
Level 10 - Membangun Real Project
        ↓
...
        ↓
Siap Kerja sebagai Flutter Developer

Setiap level memiliki fungsi yang berbeda.

Level 4 khususnya merupakan fondasi agar Anda tidak sekadar bisa menjalankan Flutter, tetapi juga memahami di mana kode, konfigurasi, asset, dan testing ditempatkan.

Kesimpulan

Memahami struktur project Flutter merupakan langkah penting setelah berhasil melakukan instalasi dan setup development environment.

Beberapa bagian yang paling penting untuk dikuasai pemula adalah:

lib/

sebagai tempat utama source code aplikasi,

lib/main.dart

sebagai entry point aplikasi,

pubspec.yaml

sebagai file konfigurasi project dan dependency,

serta:

test/

sebagai tempat kode pengujian.

Sementara itu, folder:

android/
ios/
web/
windows/
macos/
linux/

berhubungan dengan target platform masing-masing.

Anda juga perlu mengenali file seperti:

pubspec.lock
analysis_options.yaml
.gitignore
README.md

serta memahami bahwa:

build/
.dart_tool/

merupakan bagian yang terutama dikelola oleh tooling.

Yang paling penting, jangan merasa harus menghafal seluruh struktur project sekaligus.

Mulailah dari tiga bagian utama:

lib → main.dart → pubspec.yaml

Setelah memahami ketiganya, Anda akan jauh lebih mudah mengikuti tutorial Flutter dan membaca project milik developer lain.

Pada tahap berikutnya, kita akan mulai masuk ke inti pengembangan UI Flutter melalui Level 5 — Mengenal Widget Flutter.