เพื่อเริ่มพัฒนาด้วย Flutter เราจำเป็นต้องตั้งค่า Environment บนเครื่องคอมพิวเตอร์ ซึ่งรวมถึงการติดตั้งเครื่องมือที่จำเป็นและกำหนดค่าระบบ โดยทำตามขั้นตอนเหล่านี้:
| Requirement | Minimum | Recommended |
|---|---|---|
| x86_64 CPU Cores | 4 | 8 |
| Memory in GB | 8 | 16 |
| Display resolution in pixels | WXGA (1366 x 768) | FHD (1920 x 1080) |
| Free disk space in GB | 11.0 | 60.0 |
| Operating System | Windows 10 | Windows 10 or later |
การดาวน์โหลด Flutter SDK มีหลายวิธี เลือกตัวอย่างใดตัวอย่างหนึ่งดังต่อไปนี้
เพื่อติดตั้ง Flutter โดยใช้คำแนะนำเหล่านี้ ให้ตรวจสอบว่าเราได้ติดตั้ง Visual Studio Code เวอร์ชัน 1.77 หรือใหม่กว่า และส่วนขยาย Flutter สำหรับ VS Code แล้ว
-
เปิด VS Code
-
เปิด Command Palette โดยกด
Control + Shift + P -
ใน Command Palette ให้พิมพ์
flutter -
เลือก Flutter: New Project
-
VS Code จะแจ้งให้เราระบุตำแหน่งของ Flutter SDK บนคอมพิวเตอร์ของเรา
-
กรณีที่เราได้ติดตั้ง Flutter SDK ไว้แล้ว ให้คลิก Locate SDK
-
กรณีที่เรายังไม่ได้ติดตั้ง Flutter SDK ให้คลิก Download SDK
-
-
เมื่อได้รับแจ้งว่า Which Flutter template? ให้ข้ามไป กด
Esc
-
เมื่อมีข้อความ
Select Folder for Flutter SDKปรากฏขึ้น, เลือกตำแหน่งที่เราต้องการให้ Flutter SDK เก็บไว้ในอุปกรณ์ของเรา ให้เลือกdifferent locationเช่น%USERPROFILE%หรือC:\Users\username\AppData\Local\flutterหรือC:\dev** อย่าติดตั้ง Flutter SDK ใน Folder ที่มี
- อักขระพิเศษ หรือ เว้นวรรค
- Path ที่มีการขอสิทธิ์ในการเข้าถึง
ตัวอย่างที่ไม่ควรเก็บไว้เช่น
C:\Program Files\flutter -
คลิกที่ปุ่ม
Clone Flutterในขณะที่ดาวน์โหลด Flutter, VS Code จะแสดงการทำงานผ่าน notification :
Downloading the Flutter SDK. This may take a few minutes.ระบบจะใช้เวลาสักครู่ หากไม่มีอะไรเกิดขึ้นให้กดปุ่ม
Cancelและทำรายการใหม่ตั้งแต่ต้นอีกครั้ง -
เมื่อการดาวน์โหลดเสร็จสิ้นจะได้ Output ดังนี้ :
Checking Dart SDK version... Downloading Dart SDK from the Flutter engine ... Expanding downloaded archive...หากเสร็จสมบูรณ์ ระบบจะแสดงผลบน notification ดังนี้
Initializing the Flutter SDK. This may take a few minutes.ระหว่างระบบทำการ initialize ระบบจะใช้เวลาสักครู่ และจะเห็นผลลัพทธ์ดังนี้
Building flutter tool... Running pub upgrade... Resolving dependencies... Got dependencies. Downloading Material fonts... Downloading Gradle Wrapper... Downloading package sky_engine... Downloading flutter_patched_sdk tools... Downloading flutter_patched_sdk_product tools... Downloading windows-x64 tools... Downloading windows-x64/font-subset tools... -
สำคัญ เมื่อ Flutter ทำการติดตั้งสำเร็จ ระบบจะถามเราว่าจะให้ติดตั้ง
Flutter SDKtoPATHหรือไม่ ? โดยระบบจะแสดงดังนี้Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?ให้คลิกเลือกที่
Add SDK to PATHเมื่อสำเร็จ ระบบจะแสดงข้อมูลดังนี้The Flutter SDK was added to your PATH
เพื่อจะติดตั้ง Flutter SDK ในรูปแบบการดาวน์โหลด เราจะดาวน์โหลด archive (zip) แล้วแตกไฟล์ไฟล์ไปที่เราต้องการ
-
ดาวน์โหลด Flutter SDK ที่เป็น
Stable Versionโดยสามารถเลือก SDK อื่นๆ ได้เช่นกัน -
ทำการคลาย zip และคัดลอกไปยัง Folder ที่เราต้องการ เช่น
C:\src\flutterหรือC:\dev\flutterหรือ%LOCALAPPDATA%เช่น (C:\Users\username\AppData\Local\flutter)** อย่าติดตั้ง Flutter SDK ใน Folder ที่มี
- อักขระพิเศษ หรือ เว้นวรรค
- Path ที่มีการขอสิทธิ์ในการเข้าถึง
ตัวอย่างที่ไม่ควรเก็บไว้เช่น
C:\Program Files\flutter -
แก้ไข Environment Variable
-
กดปุ่ม start
-
พิมพ์ค้นหาว่า
environments -
เลือก
Edit the system environment variables -
คลิกที่ปุ่ม
Environment Variables… -
ที่กรอบ User variables for คลิกที่
Pathแล้วเลือกที่ปุ่มEdit… -
เลือก Browse แล้วเลือก Folder ที่ติดตั้ง Flutter SDK ไว้ เช่น c:\src\flutter\bin
-
กด Ok จนปิดหน้าต่างหมด
-
เป็นวิธีที่ง่ายในการดาวน์โหลด Flutter โดยการ Clone จาก GitHub ไปยัง Folder ที่เราต้องการ
** เพื่อให้แน่ในว่าจะสามารถติดตั้ง Flutter SDK ในวิธีนี้ได้ โปรดตรวจสอบว่า Git ได้ติดตั้งบนคอมพิวเตอร์แล้วหรือยัง
-
เปิด
TerminalหรือCommand Promptบน Windows สร้าง Folder โดยพิมพ์git clone https://github.com/flutter/flutter.git -b stable C:\dev\flutterโดยที่
C:\dev\Flutterคือตำแหน่งที่เราต้องการให้ Flutter SDK เก็บไว้ -
แก้ไข Environment Variable
-
กดปุ่ม start
-
พิมพ์ค้นหาว่า
environments -
เลือก
Edit the system environment variables -
คลิกที่ปุ่ม
Environment Variables… -
ที่กรอบ User variables for คลิกที่
Pathแล้วเลือกที่ปุ่มEdit… -
เลือก Browse แล้วเลือก Folder ที่ติดตั้ง Flutter SDK ไว้ เช่น c:\src\flutter\bin
-
กด Ok จนปิดหน้าต่างหมด
-
| Requirement | Minimum | Recommended |
|---|---|---|
| x86_64 หรือ ARM CPU Cores | 4 | 8 |
| Memory in GB | 8 | 16 |
| Display resolution in pixels | WXGA (1366 x 768) | FHD (1920 x 1080) |
| Free disk space in GB | 35.0 | 128.0 |
| Operating System | macOS 10.15 Catalina | macOS 12 Monterey หรือใหม่กว่า |
ในบางกรณี Flutter Components บางอันต้องการ Rosetta 2 บน MacOS ที่เป็น Apple silicon (M1, M2, M3) เปิด Terminalแล้วพิมพ์
sudo softwareupdate --install-rosetta --agree-to-license
-
XCode 15 สำหรับการ Debug และ Compile เพื้อให้สามารถทดสอบบน
iOS Simulatorได้ -
CocoaPods สำหรับ Compile Flutter plugin เพื่อใช้สำหรับ Native app
ติดตั้ง
CocoaPodsด้วยคําสั่งsudo gem install cocoapods
การดาวน์โหลด Flutter SDK มีหลายวิธี เลือกตัวอย่างใดตัวอย่างหนึ่งดังต่อไปนี้
เพื่อติดตั้ง Flutter โดยใช้คำแนะนำเหล่านี้ ให้ตรวจสอบว่าเราได้ติดตั้ง Visual Studio Code เวอร์ชัน 1.77 หรือใหม่กว่า และส่วนขยาย Flutter สำหรับ VS Code แล้ว
-
เปิด VS Code
-
เปิด Command Palette โดยกด
Command + Shift + P -
ใน Command Palette ให้พิมพ์
flutter -
เลือก Flutter: New Project
-
VS Code จะแจ้งให้เราระบุตำแหน่งของ Flutter SDK บนคอมพิวเตอร์ของเรา
-
กรณีที่เราได้ติดตั้ง Flutter SDK ไว้แล้ว ให้คลิก Locate SDK
-
กรณีที่เรายังไม่ได้ติดตั้ง Flutter SDK ให้คลิก Download SDK
-
-
เมื่อได้รับแจ้งว่า Which Flutter template? ให้ข้ามไป กด
Esc
-
เมื่อมีข้อความ
Select Folder for Flutter SDKปรากฏขึ้น, เลือกตำแหน่งที่เราต้องการให้ Flutter SDK เก็บไว้ในอุปกรณ์ของเรา ให้เลือกdifferent locationเช่น~/devหรือ/Users/username/dev -
คลิกที่ปุ่ม
Clone Flutterในขณะที่ดาวน์โหลด Flutter, VS Code จะแสดงการทำงานผ่าน notification :
Downloading the Flutter SDK. This may take a few minutes.ระบบจะใช้เวลาสักครู่ หากไม่มีอะไรเกิดขึ้นให้กดปุ่ม
Cancelและทำรายการใหม่ตั้งแต่ต้นอีกครั้ง -
เมื่อการดาวน์โหลดเสร็จสิ้นจะได้ Output ดังนี้ :
Checking Dart SDK version... Downloading Dart SDK from the Flutter engine ... Expanding downloaded archive...หากเสร็จสมบูรณ์ ระบบจะแสดงผลบน notification ดังนี้
Initializing the Flutter SDK. This may take a few minutes.ระหว่างระบบทำการ initialize ระบบจะใช้เวลาสักครู่ และจะเห็นผลลัพทธ์ดังนี้
Building flutter tool... Running pub upgrade... Resolving dependencies... Got dependencies. Downloading Material fonts... Downloading Gradle Wrapper... Downloading package sky_engine... Downloading flutter_patched_sdk tools... Downloading flutter_patched_sdk_product tools... Downloading windows-x64 tools... Downloading windows-x64/font-subset tools... -
สำคัญ เมื่อ Flutter ทำการติดตั้งสำเร็จ ระบบจะถามเราว่าจะให้ติดตั้ง
Flutter SDKtoPATHหรือไม่ ? โดยระบบจะแสดงดังนี้Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?
ให้คลิกเลือกที่
Add SDK to PATHเมื่อสำเร็จ ระบบจะแสดงข้อมูลดังนี้The Flutter SDK was added to your PATH
เพื่อจะติดตั้ง Flutter SDK ในรูปแบบการดาวน์โหลด เราจะดาวน์โหลด archive (zip) แล้วแตกไฟล์ไฟล์ไปที่เราต้องการ
-
ดาวน์โหลด Flutter SDK (intel Processor) หรือ Flutter SDK (Apple Silicon) ที่เป็น
Stable Versionโดยสามารถเลือก SDK อื่นๆ ได้เช่นกัน -
สร้าง Folder ไว้ใน
/Users/<username>/developmentหรือ~/development -
ทำการคลาย zip และคัดลอกไปยัง Folder ที่เราต้องการ เช่น
~/developmentในรูปแบบ~/development/flutter -
เพิ่ม Flutter ไปยัง
PATHเพื่อรันคำสั่ง Flutter ใน Terminal ให้เพิ่ม Flutter ลงใน environment variablePATHคู่มือนี้สันนิษฐานว่า Mac ของเรารันเชลล์เริ่มต้นล่าสุดคือzshซึ่ง Zsh จะใช้ไฟล์.zshenvสำหรับตัวแปรสภาพแวดล้อม (environment variables)-
เปิด Terminal แล้วพิมพ์
nano ~/.zshenvหากไม่คุ้นในการใช้
nanoอาจใช้VS Codeในการเปิดได้เช่นกันcode ~/.zshenv -
คัดลอกบรรทัดต่อไปนี้และวางไว้ท้ายสุดของไฟล์
~/.zshenvexport PATH=$HOME/development/flutter/bin:$PATH
-
บันทึกไฟล์
~/.zshenv -
เพื่อให้การเปลี่ยนแปลงนี้มีผล ให้รีสตาร์ทเซสชันของ terminal ทั้งหมดที่เปิดอยู่
-
เพื่อพัฒนาแอป Flutter สำหรับ iOS ให้ติดตั้ง Xcode เพื่อคอมไพล์เป็น native bytecode
-
เพื่อกำหนดค่า command-line tools ให้ใช้เวอร์ชันของ Xcode ที่ติดตั้งไว้ ให้รันคำสั่งต่อไปนี้
$ sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'ใช้พาธนี้เพื่อใช้ Xcode เวอร์ชันล่าสุด หากเราต้องการใช้เวอร์ชันอื่น ให้ระบุพาธนั้นแทน
-
ยอมรับข้อตกลงสัญญาอนุญาตของ Xcode
$ sudo xcodebuild -license
พยายามใช้ Xcode เวอร์ชันปัจจุบันให้มากที่สุด
เพื่อให้ใช้ Android Studio และ Android SDK ในการพัฒนาแอป Flutter สำหรับ Android จำเป็นต้องตั้งค่า Android Studio ที่จำเป็นดังนี้
- Android SDK Platform, API 34.0.5
- Android SDK Command-line Tools
- Android SDK Build-Tools
- Android SDK Platform-Tools
- Android Emulator
คำสั่ง flutter doctor จะตรวจสอบความถูกต้องของส่วนประกอบทั้งหมดของสภาพแวดล้อมการพัฒนา Flutter ที่สมบูรณ์สำหรับ Windows
-
เปิด PowerShell
-
เพื่อตรวจสอบการติดตั้งส่วนประกอบทั้งหมด ให้รันคำสั่งต่อไปนี้
flutter doctor
เนื่องจากคุณเลือกที่จะพัฒนาสำหรับ Android คุณจึงไม่จำเป็นต้องมี "ทุก" ส่วนประกอบ หากคุณทำตามคู่มือนี้ ผลลัพธ์ของคำสั่งของคุณควรจะคล้ายกับ:
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on Microsoft Windows 11 [Version 10.0.22621.3155], locale en)
[✓] Windows version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.5)
[!] Chrome - develop for the web
[!] Visual Studio - develop Windows apps
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.89)
[✓] Connected device (1 available)
[✓] Network resources
! Doctor found issues in 2 categories.
หรือ บน MacOS
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.0 23E214 darwin-arm64, locale en)
[!] Android toolchain - develop for Android devices
[!] Chrome - develop for the web
[✓] Xcode - develop for iOS and macOS (Xcode 15)
[!] Android Studio (not installed)
[✓] VS Code (version 1.89)
[✓] Connected device (1 available)
[✓] Network resources
! Doctor found issues in 3 categories.
สำหรับการติดตั้งเพิ่มเติมให้เข้าไปยัง คู่มือการติดตั้ง Flutter จาก Official Website