เริ่มต้นเขียนแอพมือถือด้วย 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 ข้อควาในแอพให้เราทันที โดยไม่ต้องโหลดแอพขึ้นมาใหม่ )


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