เริ่มต้นเขียนแอพมือถือด้วย Flutter บนโปรแกรม VS Code

 

ก่อนจะเริ่มเขียนแอพด้วย Flutter และ VS Code เราจะต้องติดตั้งโปรแกรมเหล่านี้ก่อน

 

เริ่ม...

1. เปิด VS Code ขึ้นมา แล้วเข้าไปที่ File > Open Folder > เลือกโฟลเดอร์ว่างๆซักอัน เพื่อไม่ให้โค๊ดไปปนกับไฟล์อื่นๆในเครื่องเรา ( ในตัวอย่างเลือก D:\test\flutter )

 

2. เปิด Terminal ของ VS Code เพื่อใช้ในการเขียนคำสั่งต่างๆ ( ใช้แทน Command Prompt )

 

3. หน้าต่าง Teminal จะแสดงอยู่ที่ด้านล่างของ VS Code ให้เราพิมพ์คำสั่ง flutter create xxx ลงไป ( xxx แทนด้วยชื่อ folder ของแอพหรือโปรเจคที่เราต้องการ ) แล้ว Enter

 

4. หลังจากนั้นเราจะได้ไฟล์เริ่มต้นของแอพขึ้นมาประมาณนี้

 

5. ให้เราพิมพ์ cd xxx ( xxx คือชื่อที่เราตั้งไว้ในข้อ 3. ) แล้ว Enter เพื่อชี้ตำแหน่งโฟลเดอร์ไปยังที่อยู่ของซอสโค๊ดของเรา

 

6. ให้เราเปิด Android Emulator ขึ้นมา ( วิธีสร้างและเรียกใช้งาน Android Emulator )

 

7. พิมพ์ flutter run แล้ว Enter เพื่อให้ vs code ทำการสร้างแอพจากตัวอย่างโค๊ดที่เราสร้างขึ้น ไปแสดงผลใน Android Emulator

 

8. ทดลองแก้ Title ของแอพ โดยเปิดไฟล์ lib/main.dart ซึ่งเป็นไฟล์เริ่มต้นการทำงานของแอพ โดยเปลี่ยนข้อความจาก Flutter Demo Home Page ( บรรทัดที่ 23 ) เป็นอะไรก็ได้แล้วบันทึก หลังจากนั้นใช้เมทา์มาคลิกที่หน้าต่าง Terminal แล้วพิมพ์ r ลงไป ( flutter จะทำการ refresh ข้อควาในแอพให้เราทันที โดยไม่ต้องโหลดแอพขึ้นมาใหม่ )

 

9. เสร็จเรียบร้อยสำหรับแอพแรกของเรา :)