เอกสารประกอบการเรียน การพัฒนา Mobile Application ด้วย Flutter
- download flutter Flutter – Build apps for any screen
Screenshot 
- Download Android Studio https://developer.android.com/studio
- ทำการแตกไฟล์ flutter คลิกแล้ว extract all
- ตั้งค่า windows ให้รู้จัก flutter
คลิกขวาที่ this pc เลือก properties
แล้วคลิก Advance system setting แล้วเลือก Environment Variables
ทำการวาง path flutter\bin อาจจะ browse หาตามภาพ
หลังจากนั้นกด OK จนปิดหน้าจอ Advanced System Setting ไป - ทดสอบ ว่า windows รู้จัก flutter หรือยัง โดยการเปิด CMD ขึ้นมาแล้วพิมพ์ flutter doctor
พิมพ์ flutter doctor ลงใน command promp ถ้าขึ้นตามภาพแสดงว่า windows รู้จัก flutter แล้ว
- ติดตั้ง Android Studio เพื่อสร้างโปรเจค flutter และจำลอง android emulator (จำลองเครื่อง android บน PC เรา)
ทำการคลิกไฟล์ install android studio
พิมพ์ชื่อ folder จาก new folder เป็น android แล้วกด ok ตามภาพ
รอโหลด 
ลงเสร็จจะได้หน้าตาแบบนี้
- ทำให้ windows รู้จักกับ android studio โดยใช้คำสั่ง command แล้ว android ต้องตอบกลับ เปิด cmd ขึ้นมาแล้วลองพิมพ์ android
ต้องทำให้ windows รู้จักกับ android ให้ไป คลิกขวาที่ this pc เลือก properties เลือก advance system setting แล้วเลือก edit path (ขั้นตอนคล้ายๆ ต้องทำ flutter ด้านบนข้อที่ 4)
เข้าไปที่ my computer เปิด ตามภาพไป copy path android
เข้าไปยัง
C:\Users\PCUSER\AppData\Local\Android\Sdk\platform-tools
หลังจากนั้น copy url ด้านบนจากภาพ แล้วเอาไปวางใน path ที่กำลัง edit แล้วกด ok
กด ok จนปิดหน้า advance system setting
หลังจากนั้นเปิด cmd มาอีกรอบแล้วลองพิมพ์ android (เนื่อง จากเป็น android version ใหม่ ไม่มี path tools แล้วเดียวลองทดสอบไม่ต้องใข้) - เปิด android studio แล้วลง plugin flutter
install เสร็จกด restart IDE
จะเปิดโปรแกรม android studio อีกครั้ง จะพบปุ่มให้สร้าง project flutter
- เริ่มสร้างโปรเจค flutter กด new flutter project
กดเลือก flutter ตั้งค่า flutter sdk ที่เก็บ flutter ของเราตามภาพ
หลังจากนั้นกด next
กด create เลย
เขาจะทำการสร้าง project flutter ได้ main.dart มาดังภาพ
- ลองแสดงผลบน emulator ทำการติดตั้ง emulator android ดังนี้
ทำการกด play emulator
(play กับ stop จะปุ่มตำแหน่งเดียวกัน)
หลับจากนั้นลองกด run app ตามภาพ
ลองแก้ตรง children ตรง text พิมพ์ชื่อเราแล้วกด ctrl+s เพื่อ save จะเห็นว่าตรงกลางจอ จะแสดงตามที่เราแก่
กด create เลย
ทำการกด play emulator
ลองแก้ตรง children ตรง text พิมพ์ชื่อเราแล้วกด ctrl+s เพื่อ save จะเห็นว่าตรงกลางจอ จะแสดงตามที่เราแก่ 