Flutter Setup & Toolchain

หมายเหตุ Playground: บทเรียนนี้เป็น setup และ toolchain — ไม่มี snippet ที่รันในบราวเซอร์ได้อย่างมีความหมาย ทำตามขั้นตอนใน terminal ของคุณ

การ setup Flutter ใกล้เคียงกับการติดตั้ง Go หรือ Rust toolchain มากกว่า npm install คุณดาวน์โหลด SDK ครั้งเดียว เพิ่มใน PATH แล้ว flutter CLI จัดการทุกอย่างเอง — dependency management, device emulation, builds, และ hot reload

ติดตั้ง Flutter

เข้าไปที่ flutter.dev/docs/get-started/install และทำตาม guide สำหรับ OS ของคุณ (macOS, Windows, หรือ Linux)

macOS shortcut (Homebrew):

brew install --cask flutter

หลังติดตั้งแล้ว รัน doctor เพื่อตรวจสอบ environment:

flutter doctor

flutter doctor เหมือน npx create-react-app --check ของ Flutter — scan หา dependency ที่ขาด (Xcode, Android Studio, connected devices) และบอกว่าต้องแก้อะไร

คอร์สนี้อิงเวอร์ชันไหน

ทุกอย่างในคอร์สนี้เขียนตาม Flutter 3.47 (stable ปัจจุบัน) และเทียบกับ React 19 ฝั่ง React stable channel ของ Flutter ออกประมาณไตรมาสละครั้ง จึงมีข้อกำหนดของ platform สองสามข้อที่ควรเช็คก่อนเริ่ม:

เป้าหมาย	ข้อกำหนดบน Flutter 3.47
iOS	iOS 15 ขึ้นไป (ขยับจาก 13)
macOS	macOS 12 ขึ้นไป (ขยับจาก 10.15)
Xcode	รองรับ Xcode 27
Renderer	Impeller เป็นค่าเริ่มต้นบน iOS, Android, macOS, Windows และ Linux
iOS plugin	Swift Package Manager ส่วน CocoaPods อยู่ในสถานะ maintenance

Impeller เข้ามาแทน Skia เพื่อแก้ปัญหา “animation แรกกระตุก” โดยตรง เพราะ shader ถูก compile ตอน build แทนที่จะไปค้นพบเอาตอน runtime ถ้าคุณเคยอ่านบทความ Flutter เก่า ๆ ที่บ่นเรื่อง jank ในเฟรมแรกของ animation นั่นคือปัญหาที่ Impeller แก้ และบน 3.47 มันเปิดเป็นค่าเริ่มต้นทุก platform แล้ว

เรื่อง Swift Package Manager จะมีผลครั้งแรกตอนคุณเพิ่ม plugin ที่มี native code ฝั่ง iOS plugin ยอดนิยมส่วนใหญ่ migrate ไปแล้ว ถ้าเจอตัวที่ยังไม่ migrate คุณจะเห็น CocoaPods ถูกใช้แทน ซึ่งยังทำงานได้อยู่ตอนนี้ แต่ให้มอง plugin ที่ยังไม่ migrate เป็นสัญญาณเรื่องการดูแลรักษา แบบเดียวกับที่คุณมอง npm package ที่ publish ครั้งสุดท้ายเมื่อสามปีก่อน

flutter CLI vs npm / Vite

npm / Vite / CRA	flutter CLI	วัตถุประสงค์
npm create vite@latest my-app	flutter create my_app	Scaffold project ใหม่
npm install	flutter pub get	ติดตั้ง dependencies
npm run dev	flutter run	Start dev server + hot reload
npm run build	flutter build apk / flutter build web	Production build
npm install package	flutter pub add package	เพิ่ม dependency
npm test	flutter test	รัน tests
npx eslint .	flutter analyze	Lint / static analysis

Scaffold project ใหม่

flutter create my_app
cd my_app
flutter run

flutter create generate project คล้ายกับ create-react-app: entry point, sample widget, และ platform-specific boilerplate ทั้งหมด (iOS Xcode project, Android Gradle files, web index.html)

โครงสร้าง project vs React

flowchart TB
  root["my_app/"]
  lib["lib/"]
  mainDart["main.dart — entry point (≈ src/main.tsx)"]
  test["test/"]
  widgetTest["widget_test.dart — tests (≈ src/__tests__/)"]
  pubspec["pubspec.yaml — dependencies (≈ package.json)"]
  android["android/ — Android native shell"]
  ios["ios/ — iOS native shell"]
  web["web/ — Web shell"]
  root --> lib --> mainDart
  root --> test --> widgetTest
  root --> pubspec
  root --> android
  root --> ios
  root --> web

Flutter project structure vs React

Dart code ทั้งหมดอยู่ใน lib/ คุณแทบไม่ต้องยุ่งกับ android/ หรือ ios/ เว้นแต่จะต้องใช้ native code

pubspec.yaml vs package.json

pubspec.yaml

name: my_app
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.4.0          # HTTP client  (≈ axios)
  go_router: ^18.0.0   # routing      (≈ react-router-dom)

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0

หลังแก้ pubspec.yaml รัน flutter pub get (≈ npm install) เพื่อ fetch packages จาก pub.dev — npm registry ของ Dart

เพิ่ม package

flutter pub add dio

คำสั่งนี้แก้ pubspec.yaml และรัน pub get ในขั้นตอนเดียว — เทียบเท่า npm install dio

Editor setup

VS Code (แนะนำสำหรับ React developer):

1. ติดตั้ง extension Flutter (รวม Dart language support)
2. เปิด command palette → Flutter: Select Device เพื่อเลือก simulator/emulator
3. กด F5 หรือรัน Flutter: Run เพื่อเริ่มพร้อม hot reload

Android Studio / IntelliJ: ติดตั้ง Flutter และ Dart plugins เหมาะสำหรับงาน Android เป็นหลัก

Hot Reload vs Fast Refresh

ทั้งคู่ทำงานเหมือนกัน: แก้ source file, save, แล้ว app ที่รันอยู่จะ update ภายในไม่ถึงวินาทีโดยไม่ต้อง reset state ใน Flutter:

• Hot Reload (r ใน terminal, หรือ Ctrl+S ใน VS Code ที่มี extension) — inject code ที่อัปเดตแล้ว, preserve widget state
• Hot Restart (R) — restart ทั้งหมด, reset state เทียบเท่า Ctrl+C + npm run dev

รันบน device หรือ emulator

# list available devices
flutter devices

# run on a specific device
flutter run -d "iPhone 16"
flutter run -d chrome
flutter run -d macos

🔀 React toolchain → Flutter toolchain

• ไม่มี node_modules/ folder Packages เก็บใน global pub cache (~/.pub-cache) project folder จึงเบา
• pubspec.lock เทียบเท่า package-lock.json / yarn.lock ต้อง commit
• Platform folders (android/, ios/) ถูก generate โดย flutter create และ Flutter จัดการเอง ไม่ต้องเขียน Gradle หรือ Xcode config เว้นแต่ต้องการ native plugin
• flutter analyze คือ linter ที่ built-in ไม่ต้อง setup ESLint แยก
• flutter test รัน file ทั้งหมดที่ match test/**/*_test.dart — ไม่ต้อง config Jest

Flutter equivalent ของ `npm install` คืออะไร?

flutter install flutter pub get dart pub install flutter fetch

Dart application code อยู่ใน folder ใดของ Flutter project?

src/ dart/ lib/ app/

คำสั่งใดที่เพิ่ม package ใหม่ใน Flutter project และอัปเดต pubspec.yaml?

flutter install <pkg> flutter pub add <pkg> dart add <pkg> pub install <pkg>

Hot Reload ของ Flutter preserve widget state ส่วน Hot Restart ทำอะไร?

Save state ปัจจุบันลง disk Reload เฉพาะ file ที่เปลี่ยน Restart ทั้งหมดและ reset state ทั้งหมด Rebuild native app binary

Impeller ซึ่งเป็น renderer เริ่มต้นบน Flutter 3.47 แก้ปัญหาอะไร?

ทำให้ Flutter รันบน web ได้โดยไม่ต้องใช้ WebAssembly compile shader ตอน build จึงไม่มีอาการกระตุกในเฟรมแรกของ animation แทนที่ Dart ด้วยภาษาที่เร็วกว่า ทำให้ไม่ต้องมี folder เฉพาะของแต่ละ platform

Submit

Mark as complete