ติดตั้ง Flutter 3 บน MBP M1
Flutter 3 by Keptcode.com
Repo: Github.com (รบกวนกด Start ให้ด้วยนะคับ)
ติดตั้ง: โปรแกรม Xcode
หากว่าเครื่องเราติดตั้ง Xcode เวอร์ชั่นต่ำกว่า แนะนำให้ทำการอัพเดท Xcode ให้เป็นเวอร์ชั่นปัจจุบัน เพื่อให้สามารถรองรับเทคโนโลยีใหม่ ๆ
ติดตั้ง: โปรแกรม Android Studio แนะนำเวอร์ชั่น 2025.2.2 ขึ้นไป
ติดตั้งโปรแกรม Android Studio ตัวช่วยในการดาวโหลด / ติดตั้ง Android SDK รวมไปถึง Tools ของ Android บนเครื่องของเรา แบบง่าย ๆ
ติดตั้ง: โปรแกรม VS Code แนะนำเวอร์ชั่น 1.98.2 ขึ้นไป
โปรแกรม VS Code ใช้ในการเขียนคำสั่ง Flutter ตัวโปรแกรมที่สามารถใช้งานง่าย UI ไม่ยุ่งยาก ไม่ซับซ้อน เหมาะสำหรับมือใหม่
ดาวโหลด: Flutter 3 และติดตั้งไฟล์ SDK (ลงบนเครื่อง)
https://docs.flutter.dev/install/manualให้เรากดเลือก "ดาวโหลด" ไฟล์ Flutter SDK เวอร์ชั่นล่าสุด (3.41.2) ในรูปแบบของไฟล์ Zip หลังจากดาวโหลดไฟล์ลงเครื่องเราเสร็จแล้ว ก็ทำการแตกไฟล์ Zip ลงบนเครื่อง หลังจากการแตกไฟล์ ให้จำ PATH ตำแหน่งของโฟลเดอร์ Flutter SDK เอาไว้ เพื่อใช้ในการตั้งค่า Environment ในลำดับต่อไป
ตั้งค่า Environment สำหรับ Flutter 3
Path: [skeleton]
Language: Command
# ตั้งค่า Environment บนเครื่อง MBP M1
sudo nano ~/.zprofile
# เพิ่มคำสั่งต่อไปนี้ลงไป
export FLUTTER_ROOT="/Volumes/DEVELOP/TOOL/GOOGLE/FLUTTER/3.41.x"
export PATH="$PATH:$FLUTTER_ROOT/bin"
export PATH="$PATH":"$HOME/.pub-cache/bin"
ในตัวอย่าง PATH ตำแหน่งของ Flutter SDK คือ /Volumes/DEVELOP/TOOL/GOOGLE/FLUTTER/3.41.x ที่ได้ทำการแตกไฟล์ Zip เอาไว้
ติดตั้ง: Dart ที่เป็น Extension บน VS Code
https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-codeการติดตั้ง สามารถทำได้ง่าย ๆ โดยการเข้าไปที่ลิ้งค์ (ด้านบน) กดปุ่ม Install จากนั้นระบบจะเด้งไปยังโปรแกรม VS Code ให้อัตโนมัติ จากนั้นเราก็กดปุ่ม Install ในโปรแกรม VS Code อีกครั้ง เป็นการติดตั้ง Extension สำหรับ Dart บนโปรแกรม VS Code เสร็จสมบูรณ์
ติดตั้ง: Flutter ที่เป็น Extension บน VS Code
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutterการติดตั้ง สามารถทำได้ง่าย ๆ โดยการเข้าไปที่ลิ้งค์ (ด้านบน) กดปุ่ม Install จากนั้นระบบจะเด้งไปยังโปรแกรม VS Code ให้อัตโนมัติ จากนั้นเราก็กดปุ่ม Install ในโปรแกรม VS Code อีกครั้ง เป็นการติดตั้ง Extension สำหรับ Flutter บนโปรแกรม VS Code เสร็จสมบูรณ์
อัพเดท Software สำหรับ M1
Path: [skeleton]
Language: Command
# อัพเดท Rosetta บน M1
sudo softwareupdate --install-rosetta --agree-to-license
ติดตั้ง Cocoa Pods สำหรับ Flutter 3.32+ เป็นต้นไป
Path: [skeleton]
Language: Command
# แนะนำลบ cocoapods เวอร์ชั่นเดิม (ออกก่อน)
sudo gem install cocoapods --version 1.16.2
Cocoa Pods โปรแกรมจัดการไฟล์ Package ต่าง ๆ ของภาษา Swift (Runtime) ไม่ว่าจะเป็นการ "ดาวโหลด" และ "ติดตั้ง" หรือ "ลบข้อมูล" สำหรับ Flutter เวอร์ชั่น 3.38 แนะนำให้ใช้ Cocoa Pods เวอร์ชั่น 1.16 ขึ้นไปเท่านั้น
ติดตั้ง: JAVA SDK 25 บทเครื่อง MBP M1
https://www.oracle.com/asean/java/technologies/downloads/#jdk25-macสำหรับเครื่อง MBP M1 ให้เลือกติดตั้งเป็นแบบ ARM64 DMG Installer เพื่อให้ง่ายต่อการติดตั้ง เพียงแค่ "คลิกปุ่ม" ก็สามารถติดตั้งได้
ตั้งค่า Environment สำหรับ JAVA SDK
Path: [skeleton]
Language: Command
# ตั้งค่า Environment บนเครื่อง MBP M1
sudo nano ~/.zprofile
# เพิ่มคำสั่งต่อไปนี้ลงไป
export JAVA_HOME=$(/usr/libexec/java_home)
# ทดสอบ Environment ใหม่ (เปิด Terminal ใหม่)
echo $JAVA_HOME
## Output ##
# /Library/Java/JavaVirtualMachines/jdk-25.jdk/Contents/Home
ติดตั้ง: Dart ที่เป็น Plugin บน Android Studio
เปิดโปรแกรม Android Studio ขึ้นมา จากนั้นทำการค้นหาชื่อ Plugin คำว่า "dart" กดปุ่ม Install เพื่อทำการติดตั้ง หากติดตั้งแล้ว แนะนำให้อัพเกรดล่าสุด
ติดตั้ง: Flutter ที่เป็น Plugin บน Android Studio
เปิดโปรแกรม Android Studio ขึ้นมา จากนั้นทำการค้นหาชื่อ Plugin คำว่า "flutter" กดปุ่ม Install เพื่อทำการติดตั้ง หากติดตั้งแล้ว แนะนำให้อัพเกรดล่าสุด
ติดตั้ง: Android SDK 36+ บน Android Studio
Android API ที่จำเป็นของ Android SDK 36+
- Android SDK Platform 36.1
- Sources for Android 36.1
- Google APIs ARM 64 v8a System Image 36.1
ติดตั้ง: Android SDK สำหรับ Build APK บน Android Studio
แนะนำ Android SDK Build-Tools ดังต่อไปนี้
- เวอร์ชั่น 36.1.0
- เวอร์ชั่น 35.0.1
- เวอร์ชั่น 34.0.0
ติดตั้ง: Android SDK สำหรับ Command-line บน Android Studio
แนะนำให้เป็นเวอร์ชั่นล่าสุด (19.0) เพื่อให้สามารถรองรับเทคโนโลยีให้ทันกับโลกยุคปัจจุบัน จากในตัวอย่างขอแนะนำเป็น 16.0 ขึ้นไป หรือ 19.0 ยิ่งดี
ติดตั้ง: Android Emulator จำลอง บน MBP M1
แนะนำ Android Tools ดังต่อไปนี้
- Android Auto API Simulators เวอร์ชั่น 1
- Android Emulator เวอร์ชั่น 36.4.9
- Android SDK Platform-Tools เวอร์ชั่น 36.0.2
ตั้งค่า Android SDK สำหรับ Flutter 3
Path: [skeleton]
Language: Command
# ตั้งค่า Android SDK บนเครื่อง MBP M1
sudo nano ~/.zprofile
# เพิ่มคำสั่งต่อไปนี้ลงไป
export ANDROID_HOME=/Volumes/DEVELOP/TOOL/GOOGLE/SDK
export ANDROID_SDK_ROOT=$ANDROID_HOME
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/cmdline-tools/latest/bin
ในตัวอย่าง PATH ตำแหน่งของ Android SDK คือ /Volumes/DEVELOP/TOOL/GOOGLE/SDK ที่ได้ทำการติดตั้งผ่าน Android Studio ไว้ก่อนหน้านี้
สุดท้าย: ตรวจสอบและเตรียมความพร้อม
Path: [skeleton]
Language: Command
# รันคำสั่งตรวจสอบความพร้อมทั้งหมด
flutter doctor
# หากต้องการรายละเอียดให้เติม -v ต่อท้าย
flutter doctor -v
## Output ##
# Doctor summary (to see all details, run flutter doctor -v):
# [✓] Flutter (Channel stable, 3.41.2, on macOS 15.7.4 24G517 darwin-arm64, locale en-TH)
# [✓] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
# [✓] Xcode - develop for iOS and macOS (Xcode 26.2)
# [✓] Chrome - develop for the web
# [✓] Connected device (3 available)
# [✓] Network resources
# • No issues found!