วิธีการติดตั้ง Flutter บน Windows แบบ Step by Step

การเริ่มต้นพัฒนา Mobile Application ด้วย Flutter และ Dart นั้น จำเป็นต้องทำการติดตั้ง Flutter SDK และเครื่องมือต่างๆให้พร้อมใช้งานก่อน ซึ่งวิธีการติดตั้ง Flutter บน Windows นั้นง่ายมาก ไม่ซับซ้อน เพียงไม่กี่ขั้นตอนก็สามารถเริ่มต้นการพัฒนาได้แล้ว

System requirements

ความต้องการทางด้านระบบหรือสเปคคอมพิวเตอร์ขั้นต่ำ ที่จะใช้ในการพัฒนา ควรเป็นดังนี้

1. ระบบปฏิบัติการ: Windows 7 SP1 (64-bit) ขึ้นไป
2. พื้นที่ Hard Disk: 400 MB ขึ้นไป (ยังไม่รวมพื้นที่สำหรับติดตั้งเครื่องมือ IDE)
3. CPU: Intel Core I5 ขึ้นไป (หรือ CPU ค่ายอื่นที่เทียบเคียงกัน
4. RAM: อย่างน้อย 4 Gb ขึ้นไป (แนะนำ 8 Gb ขึ้นไป ถ้า 4 Gb อาจไม่สามารถทดสอบโปรแกรมผ่าน Emulator ได้)  

ขั้นตอนการติดตั้ง

ติดตั้ง Flutter SDK

1. ดาวน์โหลด Flutter SDK จากเวบไซต์ https://flutter.dev/docs/get-started/install/windows

2. หลังจากดาวน์โหลด จะได้ zip ไฟล์ จากนั้นให้คลาย zip ไฟล์ดังกล่าวนี้ลงไว้ใน path ที่ต้องการ เช่น C:\src\flutter

3. ตั้งค่า Path ใน Environment Variables โดยตั้งให้ตั้งค่า path ถึงโฟล์เดอร์ bin เช่น หากคลาย zip ไฟล์ไว้ที่ C:\src\flutter ให้ตั้งค่า path เป็น C:\src\flutter\bin ดังรูป

ติดตั้งเครื่องมือ IDE Tool

กรณีใช้ Android Studio

1. ดาวน์โหลด Android Studio จากเว็บไซต์ https://developer.android.com/studio

2. หลังจากดาวน์โหลด Android Studio แล้ว จะได้ไฟล์ exe ดังรูป (เลขเวอร์ชัน ขึ้นอยู่กับเวอร์ชันที่ดาวน์โหลด)

3. ดับเบิ้ลคลิกไฟล์ exe ที่ดาวน์โหลดมา เพื่อเริ่มติดตั้ง จะเห็นหน้าต่างดังรูป จากนั้นกดปุ่ม “Next”

4. ตั้งค่าตามรูป แล้วกดปุ่ม “Next”

5. ตั้งค่าที่อยู่ของโฟลเดอร์ Android Studio จากนั้นกดปุ่ม “Next”

6. กดปุ่ม “Install”

7. หลังจากติดตั้งเรียบร้อย (Completed) กดปุ่ม “Next”

8. กดปุ่ม “Finsih”

9. กดปุ่ม “OK”

10. กดปุ่ม “Next”

11. กดปุ่ม “Next” (หากต้องการปรับแต่งการติดตั้งเอง ให้เลือก Custom)

12. เลือก Theme จากนั้นกดปุ่ม “Next”

13. กดปุ่ม “Finish”

14. รอจนติดตั้งเสร็จ จากนั้นกดปุ่ม “Finish”

15. จะเห็นหน้าจอ ดังรูป จากนั้น คลิก “Configure” แล้วเลือก SDK Manager

16. เลือก Tab “SDK Platform” จากนั้นเลือกติดตั้งเวอร์ชัน Android SDK Platform ที่ต้องการ (โดยขึ้นตอนนี้อาจใช้เวลาพอสมควร ขึ้นอยู่กับความเร็วอินเตอร์เน็ต และจำนวนเวอร์ชัน SDK Platform ที่ดาวน์โหลด)

17. เลือก Tab “SDK Tools” จากนั้นเลือกติดตั้ง SDK ดังรูป

ในกรณีที่ติดตั้ง Android Studio 3.6 ขึ้นไป ให้เลือกเพิ่มเติม ดังรูป

18. ตั้งค่า Android Virtual Device โดยคลิกที่ “Configure” จากนั้นเลือก “AVD Manager”

19. คลิกปุ่ม “+ Create Virtual Device….”

20. เลือก Virtual Device ที่ต้องการ  จากนั้นกดปุ่ม “Next”

21. ในกรณีที่ต้องดาวน์โหลดเวอร์ชันของระบบปฏิบัติการ Android ให้คลิก “Download” เวอร์ชันที่ต้องการ

22. เลือก “Accept” แล้วกดปุ่ม “Next”

23. หลังจากดาวน์โหลดเสร็จ แล้วกดปุ่ม “Next”

24. กำหนดชื่อ AVD Name แล้วกดปุ่ม “Finish”

25. จะเห็นรายการ AVD แสดงขึ้นมา

26. ตั้งค่า Flutter SDK ให้คลิก “Configure” แล้วเลือก Plugins (หรือในกรณีที่เคยติดตั้ง Android Studio แล้ว ควรอัปเดตให้เป็นเวอร์ชันล่าสุด แล้วตั้งค่า Flutter SDK ตามขั้นตอนต่อไปนี้)

27. เลือก Flutter แล้วกดปุ้ม “Install”

28. กดปุ่ม ดังรูป

29. หลังจากติดตั้งเสร็จ กดปุ่ม “Restart IDE”

30. Android Studio จะ Restart ดังรูป

31. จากนั้นเข้า Command Prompt แล้วพิมพ์คำสั่ง “flutter  doctor  –android-licenses” แล้วตอบ “y” ทั้งหมด ดังรูป

32. ทดสอบ Flutter โดยเลือก “Start a new Flutter project”

33. เลือก “Flutter Application” จากนั้นกดปุ่ม “Next”

34. ตั้งค่าต่างๆ โดยกำหนด Flutter SDK path ไปยังโฟลเดอร์ที่ติดตั้ง Flutter SDK จากขั้นตอนก่อนหน้านี้ จากนั้นกดปุ่ม “Next”

35. กำหนด Packages และเลือกทั้งหมด เพื่อให้ project รองรับ Android X, Kotlin และ Swift จากนั้นกดปุ่ม “Finish” ดังรูป

36. เมื่อเข้าสู่ Android Studio แล้วรอจนกว่าการโหลด Project เสร็จสิ้น (สังเหตุที่ Status bar ด้านล่าง ต้องทำงานเสร็จสิ้น) จากนั้นเลือก AVD ที่ตั้งค่าจากขั้นตอนก่อนหน้านี้ (กรณีที่ต้องการทดสอบด้วยโทรศัพท์มือถือ ให้ต่อพ่วงโทรศัพท์มือถือเข้ากับคอมพิวเตอร์ แล้วเลือกรุ่นโทรศัพทมือถือที่แสดงขึ้นมาแทน โดยโทรศัพท์มือถือต้องเกิดโหทด Developer และยอมรับ USB Debug)

37. กดปุ่ม run

38. หากแสดงหน้าต่าง ดังรูป ให้คลิก “Allow access”

39. Flutter จะติดตั้งไปยัง AVD หรือโทรศัพท์มือถือ ดังรูป ซึ่งแสดงว่าทำการติดตั้ง Flutter SDK และ Android Studio เรียบร้อยแล้ว ง่ายจริงๆครับ

กรณีใช้ Visual Studio Code

1. ดาวน์โหลด Visual Studio Code จากเว็บไซต์ https://code.visualstudio.com/

2. หลังจากดาวน์โหลด จะได้ไฟล์ exe จากนั้นนั้นดับเบิลคลิกที่ไฟล์ exe ดังกล่าว เพื่อติดตั้ง โดยติดตั้งตามขั้นตอนปกติ ไม่ต้องปรับแก้ใดๆ

3. หลังจาดติดตั้งเสร็จ เปิดโปรแกรม Visual Studio Code ขึ้นมา จากนั้นคลิกที่ Extensions แล้วค้นหา Flutter และกดปุ่ม “Install” เพื่อติดตั้ง ดังรูป

4. หลังจากติดตั้งเสร็จ โปรแกรม Visual Studio Code จะติดตั้ง Dart ใก้ฌเยอัตโนมัติ ดังรูป

ควรติดตั้ง Extension HTML snippets, PHP Inteliphense เพิ่มเติม

ปล. หากทำการรัน Flutter Project โดยเฉพาะการพัฒนาด้วย Android Studio แล้วเจอปัญหา Error

* What went wrong:

Execution failed for task ‘:app:mergeDebugJavaResource’.

    A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade

   > com.google.common.base.VerifyException (no error message)

สามารถดูขั้นตอนการแก้ไขได้ที่นี่ การแก้ปัญหา Error “A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade”