ติดตั้ง Flutter 3 บน MBP M1
Flutter 3 by Keptcode.com
Repo: Github.com (รบกวนกด Start ให้ด้วยนะคับ)
ติดตั้ง: โปรแกรม Xcode แนะนำเวอร์ชั่น 14.2 ขึ้นไป
หากว่าเครื่องเราติดตั้ง Xcode เวอร์ชั่นต่ำกว่า แนะนำให้ทำการอัพเดท Xcode ให้เป็นเวอร์ชั่นปัจจุบันก่อน เพื่อให้สามารถรองรับเทคโนโลยีใหม่ ๆ
ติดตั้ง: โปรแกรม Android Studio แนะนำเวอร์ชั่น 2023.2.1 ขึ้นไป
Android Studio ตัวช่วยในการดาวโหลด และ ติดตั้ง Android SDK รวมไปถึง Tools ของ Android บนเครื่องของเรา แบบง่าย ๆ
ติดตั้ง: โปรแกรม VS Code แนะนำเวอร์ชั่น 1.87.2 ขึ้นไป
VS Code คือโปรแกรมที่เราจะใช้ในการเขียนคำสั่ง Flutter ต่าง ๆ โปรแกรมที่สามารถใช้งานได้ง่าย ๆ เหมาะสำหรับมือใหม่ ไล่ไปจนถึงมืออาชีพได้เลย
ดาวโหลด: Flutter 3 และติดตั้งไฟล์ SDK (ลงบนเครื่อง)
https://docs.flutter.dev/get-started/install/macos/desktop?tab=downloadให้เรากดเลือก "ดาวโหลด" ไฟล์ Flutter SDK เวอร์ชั่นล่าสุด (3.24.1) ในรูปแบบของไฟล์ Zip หลังจากดาวโหลดไฟล์ลงเครื่องเราเสร็จแล้ว ก็ทำการแตกไฟล์ Zip ลงบนเครื่อง หลังจากการแตกไฟล์ ให้จำ PATH ตำแหน่งของโฟลเดอร์ Flutter SDK เอาไว้ เพื่อใช้ในการตั้งค่า Environment ในลำดับต่อไป
ตั้งค่า Environment สำหรับ Flutter 3
Path: [skeleton]
Language: Command
# ตั้งค่า Environment บนเครื่อง MBP M1
$ nano ~/.bash_profile
# เพิ่มคำสั่งต่อไปนี้ลงไป
export FLUTTER_ROOT="/Volumes/DEVELOP/TOOL/GOOGLE/FLUTTER/3.24.x"
export PATH="$PATH:$FLUTTER_ROOT/bin"
export PATH="$PATH":"$HOME/.pub-cache/bin"
ในตัวอย่าง PATH ตำแหน่งของ Flutter SDK คือ /Volumes/DEVELOP/TOOL/GOOGLE/FLUTTER/3.24.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.24+ เป็นต้นไป
Path: [skeleton]
Language: Command
# แนะนำลบ cocoapods เวอร์ชั่นเดิม (ออกก่อน)
$ sudo gem install cocoapods --version 1.15.2
Cocoa Pods โปรแกรมจัดการไฟล์ Package ต่าง ๆ ของภาษา Swift (Runtime) ไม่ว่าจะเป็นการ "ดาวโหลด" และ "ติดตั้ง" หรือ "ลบข้อมูล" สำหรับ Flutter เวอร์ชั่น 3.24 แนะนำให้ใช้ Cocoa Pods เวอร์ชั่น 1.14 ขึ้นไปเท่านั้น
ติดตั้ง: JAVA SDK 17 บทเครื่อง MBP M1
https://www.oracle.com/java/technologies/downloads/#jdk17-macสำหรับเครื่อง MBP M1 ให้เลือกติดตั้งเป็นแบบ "ARM64 DMG Installer" (เหมือนไฟล์ .exe) เพื่อให้ง่ายต่อการติดตั้ง เพียงแค่ "คลิกปุ่ม" ก็สามารถติดตั้งได้
ตั้งค่า Environment สำหรับ JAVA SDK
Path: [skeleton]
Language: Command
# ตั้งค่า Environment บนเครื่อง MBP M1
$ nano ~/.bash_profile
# เพิ่มคำสั่งต่อไปนี้ลงไป
export JAVA_HOME=$(/usr/libexec/java_home)
# ทดสอบ Environment ใหม่ (เปิด Terminal ใหม่)
$ echo $JAVA_HOME
## Output ##
# /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
ในตัวอย่าง PATH ตำแหน่งของ Flutter SDK คือ /Volumes/DEVELOP/TOOL/GOOGLE/FLUTTER/3.24.x ที่ได้ทำการแตกไฟล์ Zip เอาไว้
ติดตั้ง: Dart ที่เป็น Plugin บน Android Studio
เปิดโปรแกรม Android Studio ขึ้นมา จากนั้นทำการค้นหาชื่อ Plugin คำว่า "dart" กดปุ่ม Install เพื่อทำการติดตั้ง หากติดตั้งแล้ว แนะนำให้อัพเกรดล่าสุด
ติดตั้ง: Flutter ที่เป็น Plugin บน Android Studio
เปิดโปรแกรม Android Studio ขึ้นมา จากนั้นทำการค้นหาชื่อ Plugin คำว่า "flutter" กดปุ่ม Install เพื่อทำการติดตั้ง หากติดตั้งแล้ว แนะนำให้อัพเกรดล่าสุด
ติดตั้ง: Android SDK 34+ บน Android Studio
Android API ที่จำเป็นของ Android SDK 34+
- Android SDK Platform 34
- Sources for Android 34
- Google APIs ARM 64 v8a System Image
ติดตั้ง: Android SDK สำหรับ Build APK บน Android Studio
แนะนำ Android SDK Build-Tools ดังต่อไปนี้
- เวอร์ชั่น 35.0.0
- เวอร์ชั่น 34.0.0
- เวอร์ชั่น 33.0.2
ติดตั้ง: Android SDK สำหรับ Command-line บน Android Studio
แนะนำให้เป็นเวอร์ชั่นล่าสุด (16.0) เพื่อให้สามารถรองรับเทคโนโลยีให้ทันกับโลกยุคปัจจุบัน จากในตัวอย่างขอแนะนำเป็น 12.0 ขึ้นไป หรือ 13.0 ยิ่งดี
ติดตั้ง: Android Emulator จำลอง บน MBP M1
แนะนำ Android Tools ดังต่อไปนี้
- Android Auto API Simulators เวอร์ชั่น 1
- Android Emulator เวอร์ชั่น 34.2.16
- Android SDK Platform-Tools เวอร์ชั่น 35.0.2
สุดท้าย: ตรวจสอบและเตรียมความพร้อม
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.24.1, on macOS 14.6.1 23G93 darwin-arm64, locale en-TH)
# [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
# [✓] Xcode - develop for iOS and macOS (Xcode 15.4)
# [✓] Chrome - develop for the web
# [✓] Android Studio (version 2023.2)
# [✓] VS Code (version 1.92.2)
# [✓] Connected device (1 available)
# [✓] Network resources
# • No issues found!
หาก "พร้อมแล้ว" สถานะต้องแสดง "เครื่องหมายถูก" เท่านั้น ไม่ว่าจะเป็น Flutter, Android toolchain, Xcode, Android Studio, VS Code เป็นต้น