เราสามารถทำความรู้จัก หรือค้นหาว่า Flutter ที่่เรากำลังจะศึกษา
ว่าคืออะไร ใช้ทำอะไร ได้ด้วยคำค้น "Flutter คืออะไร" หรือสามารถดูรายละเอียด
ที่เว็บไซต์หลักได้ที่ https://flutter.dev/
ในที่นี้เราจะทำการศึกษา และพัฒนา App จาก Flutter ผ่าน windows ดังนั้นแนวทางที่จะแนะนำ
จะเป็นแนวทางการใช้งานสำหรับ windows ทั้งหมด
การติดตั้ง Flutter
เราสามารถทำการติดตั้ง Flutter ใน windows โดยทำตามแนวทางตามลิ้งค์ด้านล่าง
ความต้องการระบบ
- OS: Windows 7 SP1 หรือใหม่กว่า (64-bit)
- พื้นที่: 400 MB ขึ้นไป
-
เครื่องมือ: สำหรับการใช้งาน command line โดยใช้
- Windows PowerShell 5.0 หรือใหม่กว่า (มีติดตั้งมาให้แล้วใน Windows 10)
- Git เวอร์ชั่น 2.x สำหรับ Windows ที่สามารถเรียกใช้งาน คำสั่ง git ผ่าน command line ใน windows ได้
ติดตั้ง Flutter SDK
ในที่นี้เราจะทำการติดตั้ง Flutter SDK ไว้ในโฟลเดอร์ dev ใน Drive C: สามารถใช้โฟลเดอร์อื่นๆ หรือตำแหน่ง
ที่จะติดตั้งอื่นได้ตามต้องการ แต่ห้ามติดตั้งไว้ใน C:/Program Files/
ไปที่ path โฟลเดอร์ที่เราจะติดตั้ง ผ่าน command line แล้วใช้คำสั่ง
git clone -b stable https://github.com/flutter/flutter.git
จะได้เป็น
กด Enter รันคำสั่ง และรอจนกว่าจะทำการดาวน์โหลด Flutter SDK สำเร็จ
หลังจากทำการดาวน์โหลด Flutter SDK เรียบร้อยแล้ว เราจะได้โฟลเดอร์ ของ Flutter SDK ชื่อ flutter
ให้เราเปิดเข้าไปในโฟลเดอร์นั้น แล้วหาไฟล์ที่ชื่อ flutter_console.bat แล้วให้ทำการรันไฟล์ โดยเปิดไฟล์นั้นขึ้นมา
เพื่อให้ทำงาน จะได้เป็นดังนี้
หน้าต่าง Flutter Console เป็นส่วนที่เราสามารถใช้คำส่ง Flutter command ได้ อย่างไรก็ตาม เราไม่จำเป็นต้องเปิดไฟล์
flutter_console.bat ทุกครั้งที่ต้องการใช้งาน คำสั่ง flutter ก็ได้ โดยเราจะใช้งานคำสั่ง Flutter ผ่าน หน้าต่าง Command Prompt
หรือ PowerShell แทน ดังนี้
ให้เข้าไปกำหนด Path โดยไปที่ ปุ่ม Start ไปที่ค้นห้า แล้วพิมพ์ "Edit environment variables for your account" เมื่อขึ้นรายการ
แสดง ให้คลิกเข้าไป จะขึ้นหน้าต่าง "Environment Variables" ให้กำหนด Path ของ flutter SDK เข้าไปในลักษณะดังรูปด้านล่าง
เนื่องจากคำสั่ง command line ของ Flutter SDK ของเราอยู่ใน Path C:\dev\flutter\bin ก็ให้กำหนดค่าไปดังรูป แล้วกด OK
ทดสอบการใช้งานโดยปิด และเปิด หน้าต่าง Command Prompt หรือ PowerShell เพื่อเรียกใช้งานใหม่อีกครั้ง
จากนั้นเรียกใช้งานคำสั่ง flutter doctor
C:\dev\flutter> flutter doctor
หลังจากใช้คำสั่ง flutter doctor จะทำให้เราทราบว่า มีส่วนใดบ้าง ที่เราต้องติดตั้งเพิ่มเติม สำหรับเริ่มต้นการพัฒนาด้วย Flutter
ตัวอย่างผลลัพธ์ที่แจ้ง ตามรูปดังนี้
จากการตรวจสอบข้างต้น จะเห็นว่า เราต้องทำการติดตั้ง Android SDK หรือหากติดตั้งแล้ว ต้องทำการกำหนด Path ให้สามารถ
เรียกใช้งาน Android SDK ได้ นอกจากนั้นก็ยังมี เราต้องทำการติดตั้ง Android Studio และติดตั้ง Flutter Plugin กับ Dart Plugin
เพื่อให้สามารถทำงานได้ รวมถึงตัวโปรแกรมที่ใช้ในการเขียนโค้ดอย่าง Visual Studio Code หรือ VS Code เราต้องทำการติดตั้ง Flutter
Extension ให้พร้อมใช้งานด้วย และคำแนะนำสุดท้ายคือ เรายังไม่ได้มีการเชื่อมต่ออูปกรณ์มือถือ สำหรับทดสอบ Flutter หรือยังไม่มีการ
สร้าง Emulator Device สำหรับจำลองการใช้งาน
ทั้งหมดข้างต้น คือสิ่งที่คำสั่ง flutter doctor จะตรวจสอบความพร้อมให้กับเรา เราสามารถทำการแก้ไขตามคำแนะนำและเรียกใช้คำสั่ง
นี้เพื่อเตรียมความพร้อมก่อนเริ่มใช้งานได้ตลอดเวลา
การติดตั้ง Android Studio
สำหรับในขั้นตอนการติดตั้ง Android Studio สามารถดูแนวทางจากเนื้อหานี้ได้ http://niik.in/610
การติดตั้ง Android SDK และสร้าง Emulator Device
สำหรับการติดตั้ง Android SDK และการสร้าง Emulator Device สำหรับทดสอบ App ดูจากเนื้อหานี้เป็นแนวทาง http://niik.in/613
ในส่วนถ้าเราได้ทำการติดตั้ง Android Studio เรียบร้อยแล้ว เราสามารถจัดการ Android SDK ดังนี้
เปิด Android Studio ในหน้าต่าง Welcome เลือกตัวเลือก Configure ตามรูป
ในหน้าจัดการ Android SDK ถ้าเราติดตั้งไว้แล้ว จะมีตำแหน่ง Path ของ Android SDK ในรูปข้างต้น เราติดตั้งไว้ที่ C:/SDK
การกำหนด Path ของ Android SDK
ดูแนวทางได้ที่บทความ http://niik.in/583
ในที่นี้ Android SDK เราติดตั้งไว้ที่ C:\SDK เราสามารถเข้าไปเพิ่ม ตัวแปร และ Path ได้ดังนี้
ให้เข้าไปกำหนด Path โดยไปที่ ปุ่ม Start ไปที่ค้นห้า แล้วพิมพ์ "Edit the system environment variables" เมื่อขึ้นรายการ
แสดง ให้คลิกเข้าไป จะขึ้นหน้าต่าง "Environment Variables" ให้กำหนดตัวแปร ANDROID_HOME และ Path ของ Android SDK
เข้าไปในลักษณะดังรูปด้านล่าง
ANDROID_HOME C:\SDK
ต่อไปเพิ่ม Path ทั้งสองค่าด้านล่างลงไปดังนี้
%ANDROID_HOME%\platform-tools %ANDROID_HOME%\tools
ติดตั้ง Flutter Plugin และ Dart Plugin
ต่อไปให้ทำการติดตั้ง Flutter Plugin และ Dart Plugin ลงใน Android Studio ให้เรียบร้อย โดยในหน้า Welcome ของ
Android Studio ให้เลือกที่ Configure แล้วเลือก Plugins
จากนั้น ค้นหา และติดตั้ง Flutter และ Dart Plugins ให้เรียบร้อย
ติดตั้ง Flutter Extension ใน VS Ccode
เปิด VS Code แล้วทำการติดตั้ง Flutter Extension ให้เรียบร้อย
เชื่อมต่อกับมือถือ หรือเปิดใช้งาน Emulator
เราสามารถใช้มือถือ Android เชื่อมต่อกับคอมพิวเตอร์ผ่าน USB หรือจะใช้งาน Emulator ที่สร้างไว้แล้วก็ได้
ในที่นี้จะเปิดใช้งาน Emulator โดยในหน้า Welcome ของ Android Studio เลือก Configure แล้วเลือก AVD Manager
ข้างต้นเราได้สร้าง Android Virtual Device สำหรับเป็น Emulator ไว้แล้ว กดปุ่ม Play แล้วรอสักครู่
ตอนนี้เราเตรียมทุกอย่าง น่าจะเรียบร้อยแล้ว
เรากลับไปตรวจสอบความพร้อม ผ่าน คำสั่ง flutter doctor ผ่าน command line อีกครั้ง อย่าลืมปิด และเปิด
หน้าต่าง command line ใหม่ ก่อนใช้งานคำสั่ง
เมื่อใช้คำสั่ง ตรวจสอบแล้วพบว่า เรายังติดในส่วนของ Android SDK อยู่ โดยยังไม่ได้ทำการ
ตอบรับหรือยอมรับเงื่อนไขการใช้งานใน Android licenses และมีคำแนะนำสำหรับแก้ไข โดยใช้คำสั่ง
flutter doctor --android-licenses
ให้เราพิมพ์คำสั่งข้างต้น เพื่อแก้ไขปัญหา จะขึ้นให้เราตอบตกลงโดยพิมพ์ y เพื่อตอบรับหรือ accept
ให้เราพิมพ์ y ตามคำแนะนำไปเรือยๆ จนเสร็จขึ้นตอน เสร็จแล้วลองใช้คำสั่ง flutter doctor อีกครั้ง
เมื่อทุกอย่างเรียบร้อย ก็จะแสดงดังรูปด้านบน ตอนนี้เราพร้อมสำหรับการใช้งาน Flutter แล้ว
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง