How to use VS Code to install Flutter on Windows
สวัสดีค่ะทุกคน ในบทความนี้จะขอมาพูดถึงการติดตั้ง flutter โดยใช้ VS Code บน Windows กันค่ะ
โดยก่อนที่เราจะติดตั้ง ควรจะตรวจสอบ Hardware requirements ซึ่งสามารถเข้าไปดูรายละเอียดเพิ่มเติมได้ใน document ของ flutter ได้เลย
ขั้นตอนต่อมา เราก็เตรียม Download และ install Development tools ที่จำเป็นกันค่ะ ก็จะมีรายการ ดังนี้ สามารถ click link เพื่อกดเข้าไป download ได้เลย
ขั้นตอนต่อมา ให้เตรียม text editor or IDE tool เพื่อใช้ในการ build apps ของ flutter กันค่ะ ซึ่งเจ้าของบทความจะใช้ Android Studio และ Visual Studio Code
เมื่อเราเตรียมของทุกอย่างแล้ว ก็เข้าสู่ขั้นตอนการติดตั้ง Flutter SDK กันค่ะ ซึ่งเจ้าของบทความจะใช้วิธีการ ติดตั้งผ่าน VS Code
โดยขั้นตอนแรก เปิดโปรแกรม VS Code ขึ้นแล้วไปที่ extension เพื่อติดตั้ง Flutter extension for VS Code เมื่อติดตั้งเสร็จแล้ว
ขั้นตอนต่อไป ให้กดเมนู View แล้วเลือก Command Palette
เมื่อเข้ามาใน Command Palette ให้กดเลือก Flutter: New Project ดังภาพที่ 2 ค่ะ
ก็จะแสดง pop-up ขึ้นมาแบบนี้ ให้กดเลือกปุ่ม Download SDK
เมื่อกดปุ่ม Download SDK แล้ว จะแสดง folder ขึ้นมา ให้เราเลือก folder ที่จะเก็บ flutter sdk แล้วกดปุ่ม Clone Flutter
เมื่อกด Clone Flutter จะแสดง pop-up แจ้งเตือน ดังภาพ ให้รอ ดาวน์โหลด สักครู่
เมื่อโหลดสำเร็จ จะแสดงขึ้นมาแบบนี้ค่ะ ให้กดปุ่ม Add SDK to PATH
เมื่อ add path สำเร็จจะแสดง แจ้งเตือนดังภาพที่ 7
หลังจากนั้น ลอง flutter doctor ดู เพื่อเช็คว่าได้ install หรือ verify ครบหรือยัง ซึ่งถ้าครบแล้วก็จะขึ้น ดังภาพที่ 8 ค่ะ
เท่านี้ ก็จะมี flutter อยู่ในเครื่องแล้วค่า ซึ่งสามารถเข้าไปดูรายละเอียดเพิ่มเติมได้ใน document หลักของ flutter ได้เลยค่ะ
เรามาลองสร้าง flutter Project และทดสอบแอพพลิเคชัน กันค่ะ
ซึ่งเจ้าของบล็อกจะใช้ VS code ในการ สร้าง project โดยเปิด VS code ขึ้นมา แล้วกดเลือกเมนู View จากนั้นให้กดเลือก Command Palette
เมื่อกดเลือก Command Palette ก็จะแสดง pop-up ตาม ภาพที่ 10 ค่ะ จากนั้นให้กดเลือก Flutter: New Project
เมื่อเรากดเข้ามาในเมนู Flutter: New Project แล้ว ก็จะให้เราเลือก template ของ flutter ตามภาพที่ 11 ซึ่งเจ้าของบล็อกเลือก Application ค่ะ
เมื่อเราเลือก template แล้วจะเด้งหน้า folder ขึ้นมา เพื่อให้เลือก folder ในการจัดเก็บ Project ของเรา แล้วกดปุ่ม Select a folder to create the project in ได้เลย
เมื่อเราเลือก folder เสร็จแล้ว เราก็ระบุชื่อ project ที่เราต้องการสร้างค่ะ
และนี่คือหน้าตา flutter project ของเรา (ตามภาพที่ 14)
ต่อไป เราจะไปดูวิธีการ run flutter บน andriod Device กันค่า โดยเราต้องมี android emulator กันก่อนนะคะ ซึ่งสามารถไป setting ตัว emulator กันก่อนได้ค่ะ (สามารถเข้าไปดูรายละเอียดได้ใน document ของ tool ที่เราเลือกใช้ได้เลยค่ะ)
เริ่มแรก ให้เข้ามาใน VS code แล้วกดเลือกเมนู View จากนั้นให้เลือก Command Palette ค่ะ แล้วค้นหา Flutter: Select Device
หลังจากเรากดเลือก Flutter: Select Device ก็จะแสดง device ต่างๆ ซึ่งเราสามารถกดเลือก device ที่เราต้องการจะทดสอบแอพพลิเคชันได้เลยค่ะ
ซึ่งเจ้าของบล็อกเลือก Pixel 5 API 30 ก็จะ start android emulator ขึ้นมาค่ะ
หลังจากนั้น ให้เรากดเลือกเมนู run แล้วเลือก Start Debugging ตามภาพที่ 18 ค่ะ
รอมัน run สักครู่ เราก็จะได้หน้า แอพพลิเคชัน ตามภาพที่ 19 ค่ะ
เป็นยังไงบ้างค่ะ สำหรับตัวอย่างวิธีการ ติดตั้ง flutter sdk และขั้นตอนการสร้าง project รวมถึงการ run flutter application ไม่ยากเลยใช่ไหมคะ
ซึ่งจริงๆแล้ว ยังมีวิธีการติดตั้งโดยการดาวน์โหลด ไฟล์ zip ของ flutter อีกค่ะ ผู้ชมสามารถเข้าไปอ่านรายละเอียดการติดตั้งเพิ่มเติมได้ใน document flutter ได้เลยค่ะ
Reference
