หลังจากเราได้เตรียมความพร้อมสำหรับพัฒนา
แอปด้วย Flutter ทั้งการเตรียมเครื่องมือต่างๆ ตาม
ที่ได้แนะนำไปในบทความแรกของ Flutter ทบทวน http://niik.in/937
รวมถึงทำความรู้จัก และใช้งานภาษา Dart เบื้องต้นไปแล้วในเนือหา
ในลำดับต่อไป จะเข้าสู่เนื้อหาเกี่ยวกับการพัฒนา Flutter ตามลำดับ
โดยจะเริ่มต้นที่การทดสอบรัน Demo หรือไฟล์ตัวอย่าง เมื่อทำการสร้าง
Flutter โปรเจ็คโดยใช้งานผ่าน Android Studio เป็นการเรียบเรียงลำดับ
ขั้นตอนในการพัฒนาแอป ตั้งแต่เริ่มต้น และทดสอบรันดูผลลัพธ์ โดยที่ยังไม่
ต้องลงไปในรายละเอียดของโค้ดแต่อย่างไร
สำหรับแนวทางการแนะนำในบทความ จะพูดถึงเฉพาะในส่วนของการพัฒนาสำหรับ Android
เป็นหลัก โดยเลือกใช้เครื่องมือเป็น Android Studio และใช้ Emulator จาก Virtual Device
เริ่มต้น Flutter Project
เมื่อเราทำการติดตั้งเครื่องมือ และเตรียมความพร้อมทุกอย่างแล้ว ก็ให้ทำการเปิด Android Studio ขึ้นมา
จะแสดงหน้า Welcome พร้อมกับมีเมนู "Start new flutter project.." ขึ้นมาให้เราเลือกที่เมนูดังกล่าว
หรือกรณีเปิดไว้อยู่แล้ว หรืออยู่ในหน้าโปรเจ็คที่เปิดอยู่ ก็สามารถไปที่เมนู "File" > "New" และเลือก "New Flutter Project.." ก็ได้
เลือก Flutter Application แล้วกด Next
ต่อด้วยหน้าตั้งค่าเบื้องต้น
- เป็นชื่อโปรเจ็ค
- Path ของ Flutter SDK ที่เราได้ติดตั้งไว้ path
- Path ตำแหน่งจัดเก็บโปรเจ็คของเรา
- และคำอธิบายเกี่ยวกับโปรเจ็ค
โดยค่าเหล่านี้เราสามารถแก้ไข และปรับแต่งได้ ในที่นี้เราจะใช้ค่าเริ่มต้นทั้งหมด ตรวจสอบและกด Next ต่อไป
จากนั้นจะมาต่อที่หน้าจัดการ package name
โดยทั่วไปชื่อ package name จะเป็นชื่อเฉพาะ และส่วนใหญ่ใช้เป็นชื่อโดเมนเนมหรือชื่อเว็บไซต์ของเรา เช่น example.com แล้ว
ตามด้วยชื่อแอป อย่างกรณีข้างต้น ก็เป็น com.example.flutterapp ในที่นี้เราไม่ต้องแก้ไขอะไรใช้ค่าเดิม แล้วกด Finish เพื่อทำการสร้าง
โปรเจ็ค flutter โดยจะต้องทำการเชื่อมต่อกับอินเทอร์เน็ต เนื่องจากจะมีการดาวน์โหลดส่วนต่างๆ ที่เกี่ยวข้องเข้ามาในโปรเจ็ค Demo
และอาจจะใช้เวลาสักพักหนึ่ง รอสักครู่ จะได้หน้าตาเริ่มต้นของโปรเจ็คดังนี้
โดยโครงสร้างไฟล์ของโปรเจ็คจะอยู่ด้างด้านซ้ายดังรูป และด้านขวาจะเป็นส่วนของการจัดการโค้ด หรือ Editor เราสามารถเปิดไฟล์
จัดการโค้ดหลักชื่อ "main.dart" เพื่อดูตัวอย่างโค้ดของ Demo ที่ Android Stuidio สร้างขึ้นมาให้ ซึ่งในที่นี้เราสมมติว่าเราได้ทำการ
สร้างแอปด้วย flutter มาเรียบร้อยแล้ว 1 แอป และพร้อมที่จะทดสอบรัน Demo นี้ผ่าน Emulator โดยให้เราทำการเลือก Emulator Device
ที่ได้ทำการสร้างไว้ ดังรูป อาจจะแตกต่างกันไปตามแต่ละคนได้กำหนดไว้ อย่างข้างต้นเลือกเป็น Nexus 5X API 29
เมื่อทำการเลือกแล้ว Emulator ก็จะทำการเปิดขึ้นมา ให้รอสักครู่ ให้เข้าสู่หน้าพร้อมใช้งาน
แล้วกดปุ่ม รัน ตามขั้นตอนลำดับที่ 3 ในส่วนนี้หน้าต่าง console จะแสดงการทำงาน และทำการสร้างโฟลเดอร์ build ไฟล์ apk สำหรับ
ทดสอบการทำงานผ่าน Emulator ดังรูป
รอจนกระบวนการทำงานแล้วเสร็จ เราจได้หน้าตาเริ่มต้นของ Demo แอปดังรูป โดยมีริปบิ้น debug กำกับว่าเป็นโหมดทดสอบอยู่มุม
บนขวา เป็นแอปแสดงจำนวนครั้งที่เราทำการกดที่ปุ่ม เครื่องหมวยบวก โดยค่าจะเพิ่มขึ้นเรื่อยๆ
ทดสอบกดปุ่ม 8 ครั้ง ผลลัพธ์ได้เป็นดังรูป
ลักษณะการใช้งาน Emulator คือ เมื่อเราทำการรันคำสั่ง ก็จะเป็นการสร้างไฟล์แอป จากนั้นก็ทำการติดตั้งลงใน Emulator เปิดขึ้นมา
เพื่อสดงการทำงาน เราสามารถปิดแอปนี้ใน Emulator และเปิดขึ้นมาใหม่ ได้โดยเลื่อนปัดหน้าจอขึ้น จะมี flutter_app ที่เราสร้างไว้ ดังรูป
ตอนนี้เราได้รู้จักลำดับขั้นตอนการพัฒนา Flutter แอปเบื้องต้นไปแล้ว
เพิ่มเติมการใช้งาน Android Stuido เล็กน้อย เมื่อเราต้องการปิด Project Flutter ที่เพิ่งสร้างไป เราสามารถเลือกปิดเฉพาะตัว Android
Stuido โดยไปที่เมนู "File" > "Exit" การปิดในลักษณะนี้ เมื่อเราเปิด Android Studio ขึ้นมาใหม่ จะเปิดเข้ามาในหน้าโปรเจ็คล่าสุดที่เราเปิด
ไว้และยังไม่ได้ปิดไป ทำให้เราสามารถทำงานต่อในโปรเจ็คนั้นๆ ได้ทันที
กับอีกวิธี กรณีเราต้องการจบโปรเจ็คนั้นแล้ว และจะยังไม่ได้ใช้งานต่อในทันที ก็สามารถปิดโปรเจ็คโดยไปที่ "File" > "Close Project" ก็จะ
เป็นการปิดโปรเจ็คที่เราใช้งานอยู่ และออกไปยังหน้า Welcome พร้อมกับมีรายชื่อโปรเจ็คที่เราได้สร้างไว้ ให้สามารถเลือกเปิดกลับมาใช้งาน
ต่อได้ดังรูปด้านล่าง ซึ่งหากไม่ได้ต้องการใช้่งานต่อ ก็สามารถกดปิด Android Studio ไปได้เลย
เนื้อหาเริ่มต้นสำหรับหัวข้อนี้ก็ขอจบเพียงเท่านี้ ในตอนต่อๆ ไปเราได้เริ่มเข้าสู่การโค้ดโปรแกรมตามลำดับ และสิ่งสำคัญคือความรู้ความ
เข้าใจในภาษา Dart เบื้องต้น ซึ่งสามารถทบทวนได้ที่ บทความภาษา Dart เพื่อให้การทำความเข้าใจเป็นไปง่ายขึ้น
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง