🔖 หมวดบทเรียน: พื้นฐานการเข้าใจโครงสร้างแอป Flutter

📌 เหมาะสำหรับ: ผู้เริ่มต้นที่เพิ่งสร้างโปรเจกต์แรก และต้องการเข้าใจแต่ละไฟล์ในระบบ

🎯 เป้าหมาย: เข้าใจหน้าที่ของแต่ละโฟลเดอร์และไฟล์ในโปรเจกต์ Flutter

🧭 เกริ่นนำ

เมื่อคุณสร้างโปรเจกต์ Flutter ด้วยคำสั่ง flutter create ระบบจะสร้างไฟล์และโฟลเดอร์จำนวนมากให้คุณโดยอัตโนมัติ ซึ่งบางไฟล์เป็นของระบบ บางไฟล์เราสามารถปรับแต่งเองได้ บทนี้จะพาไปรู้จักแต่ละไฟล์และหน้าที่ เพื่อให้คุณเข้าใจและสามารถพัฒนาแอปต่อได้อย่างมั่นใจ

📁 โครงสร้างโปรเจกต์หลัก

เมื่อเปิดโปรเจกต์ใน VS Code หรือ Android Studio คุณจะเห็นโครงสร้างคร่าว ๆ ดังนี้:

my_first_app/
├── android/              // โค้ดเฉพาะ Android
├── build/                // โฟลเดอร์ที่ Flutter สร้างขึ้นอัตโนมัติ (ไม่ต้องแก้ไข)
├── ios/                  // โค้ดเฉพาะ iOS
├── lib/                  // โฟลเดอร์หลักที่เราจะเขียนโค้ด Dart
│   └── main.dart         // จุดเริ่มต้นของแอป
├── test/                 // สำหรับเขียน unit test
├── pubspec.yaml          // ใช้ประกาศ dependency, asset, version
└── README.md            // เอกสารอธิบายโปรเจกต์

📌 รายละเอียดแต่ละไฟล์สำคัญ

1. lib/main.dart

• เป็นจุดเริ่มต้นของแอป
• ใช้สร้างหน้าจอหลัก, widget และ logic ส่วนใหญ่ของแอป

2. pubspec.yaml

• ไฟล์ config ที่ใช้ระบุ:
  • ชื่อและ version ของแอป
  • รายการ dependency ที่ต้องใช้ (เช่น http, provider)
  • รายการ asset เช่น รูปภาพ ฟอนต์
• ตัวอย่าง:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4

flutter:
  assets:
    - assets/images/

3. android/ และ ios/

• เป็นไฟล์พื้นฐานสำหรับ build ไปยังระบบปฏิบัติการเฉพาะ
• ถ้าไม่ได้ทำ native integration ไม่จำเป็นต้องแตะบ่อย

4. test/

• สำหรับเขียน test เช่น unit test, widget test
• โฟลเดอร์นี้จะมีไฟล์ widget_test.dart มาให้ตัวอย่าง

📝 สรุป

ความเข้าใจในโครงสร้างไฟล์ของโปรเจกต์ Flutter จะช่วยให้คุณทำงานกับโค้ดได้ง่ายขึ้น ไม่สับสน และรู้ว่าไฟล์ไหนควรแตะ ไฟล์ไหนไม่ควรแก้ โดยเฉพาะการทำงานร่วมกับทีม การรู้จัก pubspec.yaml และ main.dart จะเป็นพื้นฐานสำคัญก่อนเข้าสู่บทถัดไปเกี่ยวกับ widget ต่าง ๆ