pub & pubspec.yaml

ใน React คุณจัดการ dependencies ผ่าน npm และ package.json ใน Flutter pub คือ package manager และ pubspec.yaml คือ project manifest registry คือ pub.dev แทน npmjs.com แต่ workflow เหมือนกัน: ค้นหา package, เพิ่มลงใน manifest, ดึงมา, แล้ว import ในโค้ด

โครงสร้างของ pubspec.yaml

pubspec.yaml แบบ minimal มีห้า section ที่ map ตรงกับ concept ใน package.json:

name: my_app
description: A Flutter application.
version: 1.0.0+1

environment:
  sdk: '>=3.3.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  mocktail: ^1.0.4

flutter:
  assets:
    - assets/images/
    - assets/icons/app_icon.png

name และ description เหมือนกับ package.json ทุกประการ version ใช้ format major.minor.patch+build — +1 คือ build number ที่ใช้โดย app stores ซึ่งไม่มี equivalent ใน npm environment.sdk ล็อค Dart SDK range (คล้ายกับ engines ใน package.json) dependencies และ dev_dependencies ตรงกับ dependencies และ devDependencies ของ npm block flutter: มีเฉพาะใน Flutter — เป็นที่ที่คุณลงทะเบียน assets เพื่อให้ framework bundle ให้

Version constraints

Flutter ใช้ caret semantics เดียวกับ npm:

^1.2.0 หมายถึง >=1.2.0 <2.0.0 — compatible กับ major version ปัจจุบัน
^0.4.3 หมายถึง >=0.4.3 <0.5.0 — สำหรับ package ก่อน 1.0, minor เป็น breaking boundary
any ยอมรับทุก version ใช้อย่างระวัง เพราะทำให้ build ไม่ reproducible
>=1.0.0 <2.0.0 คือ form แบบ explicit ที่ ^1.0.0 ขยายออกมาเป็น

pubspec.lock ล็อค resolved versions ตรงเหมือน package-lock.json หรือ yarn.lock — commit ไว้เสมอ

เพิ่ม packages จาก CLI

# Add a runtime dependency (like npm install http)
flutter pub add http

# Add a dev dependency (like npm install --save-dev mocktail)
flutter pub add --dev mocktail

# Fetch all dependencies after editing pubspec.yaml manually
flutter pub get

# Upgrade dependencies within their constraints
flutter pub upgrade

# Check for outdated packages
flutter pub outdated

flutter pub add http ทำสองอย่างในคำสั่งเดียว: แก้ pubspec.yaml เพิ่ม entry ใน dependencies จากนั้นรัน pub get เพื่อดาวน์โหลด package ไม่มี flag “save” แยกต่างหาก — manifest อัปเดตเสมอ

Assets: ไม่ต้อง import ผ่าน bundler

ใน React/Vite คุณ import รูปภาพตรงๆ ใน JavaScript:

import logo from './assets/logo.svg';

Vite จัดการ bundling ให้ ใน Flutter ไม่มี bundler import แต่ต้องประกาศ asset paths ใน pubspec.yaml ภายใต้ flutter: assets: แล้ว reference ด้วย string path ใน Dart:

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

คุณสามารถประกาศทั้ง directory (assets/images/) เพื่อรวมทุกไฟล์ข้างใน หรือระบุไฟล์ทีละชิ้นเพื่อควบคุมได้แน่นขึ้น Flutter จะ bundle เฉพาะสิ่งที่คุณประกาศ

เปรียบเทียบ: package.json vs pubspec.yaml

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "axios": "^1.6.0"
  },
  "devDependencies": {
    "@testing-library/react": "^14.0.0",
    "vite": "^5.0.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  }
}

name: my_app
version: 1.0.0+1
environment:
  sdk: '>=3.3.0 <4.0.0'
dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
dev_dependencies:
  flutter_test:
    sdk: flutter
  mocktail: ^1.0.4
flutter:
  assets:
    - assets/images/
    - assets/icons/app_icon.png

🔀 package.json → pubspec.yaml

YAML ไม่ใช่ JSON. pubspec.yaml ใช้ indentation แทน braces และ brackets ไม่ต้องใส่ quote รอบ keys และ strings ต้องการ quote เฉพาะเมื่อมีอักขระพิเศษของ YAML (colons, > ขึ้นต้น ฯลฯ)
version มี build number. 1.0.0+1 — suffix +1 คือ build number ที่ App Store และ Google Play ใช้ npm ไม่มี equivalent ตรงนี้
sdk constraint ระบุชัดเจน. field environment: sdk: ล็อค Dart SDK range ใกล้เคียงกับ field engines ใน package.json มากกว่า dependency ปกติ
flutter: assets block แทน bundler imports. Vite/webpack ค้นพบ assets ผ่าน import statements Flutter ต้องการให้คุณระบุ path ใน pubspec.yaml การละเว้นขั้นตอนนี้เป็นสาเหตุที่พบบ่อยที่สุดที่ Image.asset() throw error ตอน runtime
ไม่มี scripts: section. Flutter CLI commands (flutter run, flutter build, flutter test, flutter analyze) เป็น built-in verbs ไม่มี equivalent ของการ define custom npm scripts หากต้องการ custom task runner ชุมชน Flutter ใช้ melos สำหรับ monorepos หรือ shell scripts
flutter_test คือ RTL equivalent. มาพร้อม SDK จึงปรากฏเป็น sdk: flutter dependency แทนที่จะเป็น pub.dev package ที่ pin version

Material และ Cupertino กำลังกลายเป็น package

ทุกตัวอย่างในคอร์สนี้เริ่มด้วยบรรทัดเดียวกัน:

import 'package:flutter/material.dart';

บรรทัดนี้ import มาจากตัว SDK เอง ไม่ได้มาจาก pub.dev นี่คือเหตุผลที่คุณไม่เคยเห็น Material อยู่ใน dependencies เลย Flutter 3.47 เริ่มเปลี่ยนเรื่องนี้ ตอนนี้ Material และ Cupertino ถูก ship เป็น package แยกบน pub.dev ด้วยในชื่อ material_ui และ cupertino_ui แต่ละตัวมีเวอร์ชันและ release cycle เป็นของตัวเอง แยกจาก SDK (material_ui บน pub.dev)

เหตุผลเบื้องหลังคุ้นเคยดีสำหรับ React developer มันคือความต่างระหว่าง widget library ที่ฝังมากับ runtime กับ library ที่คุณติดตั้งเองแบบ @mui/material การแยกออกมาทำให้ design system ปล่อย fix และ component ใหม่ได้โดยไม่ต้องรอ SDK release และทำให้แอปของคุณ pin version ได้

ตัว import จาก SDK ยังใช้ได้อยู่ตอนนี้ ของที่อยู่ใน SDK มีแผนจะถูก deprecate อย่างเป็นทางการใน stable release เดือนพฤศจิกายน และ Flutter เตรียม migration มาให้แล้ว:

dart fix --apply --code=migrate_design_widgets

คำสั่งนี้จะเขียน import ใหม่และเพิ่ม package เข้า pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  material_ui: ^1.2.0
  cupertino_ui: ^1.0.0

ยังไม่มีอะไรในคอร์สนี้ที่ต้อง migrate — import จาก SDK ยังถูกต้องบน 3.47 ให้รัน dart fix ตอนเริ่ม project ใหม่ และอ่าน deprecation note ของ release ที่คุณใช้อยู่ก่อน migrate แอปเดิม