Flutter for beginner (สำหรับผู้เริ่มต้น)

ตัวอย่าง workshop บางส่วนในหลักสูตรนี้

รายละเอียดเนื้อหาการอบรม

Module 1: แนะนำภาพรวมการพัฒนา Mobile Application

• เข้าใจรูปแบบการพัฒนาแอพพลิเคชั่นบน mobile แบบต่างๆ
• แนะนำแนวทางพัฒนาแอพแบบ Cross Platform
• รู้จัก Google Flutter framework กับการพัฒนาแอพแบบ Cross Platform
• สิ่งที่ต้องรู้และข้อควรระวังต่างๆ ในการพัฒนาแอพในรูปแบบต่างๆ

Module 2: การเตรียมเครื่องมือและความพร้อม

• วิธีการติดตั้งเครื่องมือและ flutter sdk บนระบบ Windows
• วิธีการติดตั้งเครื่องมือและ flutter sdk บนระบบปฎิบัติการ MacOS
• การทดสอบการทำงานทั้งบน Mac และ Windows
• การติดตั้ง Visual Studio Code พร้อมส่วนเสริมที่จำเป็น
• การสร้าง Emulator และ Simulator บน Android และ iOS
• การใช้ flutter ตรวจเช็คความพร้อมของระบบ

Module 3: เริ่มต้นกับ Flutter และการสร้าง Mobile Application

• เริ่มต้นสร้างโปรเจ็กต์ใหม่ใน flutter
• รู้จักโครงสร้างของโปรเจ็กต์พื้นฐาน
• ทดสอบรันโปรเจ็กต์ผ่าน Emulator ของ Android และ Simulator บน iOS
• ทดสอบรันโปรเจ็กต์บนอุปกรณ์จริง

Module 4: การปรับแต่งข้อมูลแอพที่สร้างขึ้น

• การเปลี่ยนชื่อแอพและ id ของแอพ
• การเปลี่ยน icon ของแอพทั้ง android และ ios
• การเปลี่ยนภาพหน้าจอเริ่มต้น (Splash screen) บน android และ ios
• วิธีติดตั้ง package ต่างๆ เข้ามาใน google flutter
• ทดสอบเรียกใช้ package และการนำไปใช้งานที่อื่น

Module 5: เขียนแอพนับจำนวนตัวเลข (Counter)

• การเตรียมโปรเจ็กต์ให้พร้อม
• แนะนำฟังก์ชันการทำงานเริ่มต้นใน Flutter
• รู้จัก Widget ใน flutter และการประกาศใช้งาน
• ทำความรู้จักโครงสร้างแอพด้วย MaterialApp Widget อย่างละเอียด
• รู้จัก Scaffold Widget สำหรับสร้างหน้าแอพอย่างละเอียด พร้อมการปรับแต่งค่าและคุณสมบัติต่างๆ ที่จำเป็นต้องรู้
• การกำหนด Theme ให้แอพที่สร้างขึ้น

Module 6: Flutter Layout ที่สำคัญสำหรับผู้เริ่มต้น

• แนวทางการออกแบบแอพ layout ที่จำเป็น
• รู้จัก Center Widget และการนำมาใช้งาน
• รู้จัก Container Widget และการใช้งาน
• การใช้งาน BoxDecoration ร่วมกับ Container widget
• การใช้ Row และ Column Widget
• การใช้ IntrinsicWidth และ IntrinsicHeight ปรับความกว้างและความสูงของ widget อัตโนมัติ
• การจัดวาง layout ด้วย Stack Widget
• การใช้งาน Expanded ขยายขนาดพื้นที่ให้อัตโนมัติ
• เรีนนรู้การใช้ FractionallySizedBox Widget น้องใหม่ที่ช่วยเรื่องการปรับขนาดรองรับแบบ Responsive
• การใช้าน SizedBox Widget
• การประยุกต์ใช้ Align Widget ที่น่าสนใจ
• แก้ปัญหาการแสดงผลในอุปกรณ์ด้วย SafeArea Widget
• การจัดการกับรูปภาพและ assets ต่างๆ ใน flutter
• การใช้งาน Icon ใน flutter
• การเพิ่มฟอนต์และเรียกใช้งานในแอพ flutter

Module 7: เข้าใจการทำงานกับ State พื้นฐานใน Flutter

• State คืออะไรใน flutter
• รู้จักและทำงานกับ Widget แบบ StatelessWidget
• รู้จักและทำงานกับ Widget แบบ StatefulWidget
• การเขียนฟังก์ชันใน StatelessWidget / StatefulWidget และเรียกใช้งาน
• ปัญหาของ state ใน flutter และแนวทางการจัดการในอนาคต

Module 8: แนวทางการขึ้นโครงสร้างโปรเจ็กต์รองรับงานขนาดใหญ่ขึ้น

• การจัดวางโครงสร้างไฟล์ต่างๆ เพื่อรองรับโปรเจ็กต์ที่มีขนาดใหญ่ขึ้นในอนาคต
• การแบ่งส่วนการแสดงผล แยกไฟล์ screen , theme, style, model, services และ widget ต่างๆ เป็นส่วนย่อยๆ
• การเรียกใช้งานซ้ำจากส่วนต่างๆ ที่สร้างไว้
• การสร้างไฟล์เก็บข้อมูลค่าคงที่ (constant) และ global variable ต่างๆ ในโปรเจ็กต์ พร้อมการเรียกใช้งาน
• นำโครงสร้างที่ได้ไปใช้ซ้ำกับโปรเจ็กต์อื่นๆ ได้

Module 9: workshop การออกแบบแอพวัดค่า BMI ของร่างกาย

• ออกแบบแอพด้วย layout ที่ได้เรียนมา
• การปรับแต่ง Witget ต่าง ๆ (Custom flutter widget)
• เรียนรู้การใช้งาน GestureDetector Widget
• การใช้งาน Slider Widget
• การสร้างแอพมากว่า 1 หน้าจอ และการทำ Routing เปลี่ยนหน้าจอไปมา
• การเขียนเงื่อนไขตรวจสอบการแสดงผลของ UI

Module 10: workshop แอพบันทึกข้อมูลเบอร์โทรศัพท์ (Contact list)

• การออกแบบหน้าจอ Login ด้วย Textfile, Password field และปุ่มกดต่างๆ
• การสร้างหน้า List View , List tile พร้อมการใส่ Event ให้สามารถกดดูรายละเอียดภายในได้
• การดึงภาพมาแสดงใน List view
• การแสดง Icon ต่าง ๆ ใน Listview
• การปรับแต่ง ListView ให้เหมาะสมกับการทำงาน

Module 11: การตรวจสอบการทำงาน (Debugging) ของแอพ

• แนะนำวิธีการ Debug Application flutter
• การเซ็ต breakpoint และการรันตาม step
• การจัดการ breakpoint และการไล่ดูปัญหาต่างๆ ที่เกิดขึ้น

Module 12: การเขียนแอพเชื่อมต่อ Web API ภายนอก

• เรียนรู้การทำงานของ Web API
• เรียกดูข้อมูล Web API จากภายนอก
• สร้างโปรเจ็กต์ดึงข้อมุล API จากกรมควบคุมโรค เพื่อดึงสถิติ Covid 19
• ใช้ ListView และ ListTile สร้าง Layout
• ติดตั้ง package ที่จำเป็นสำหรับการทำงานกับ http
• เรียนรู้การทำงานแบบ Asynchonous ในภาษา Dart
• การเรียกข้อมูลจาก Web API ด้วย HTTP
• สร้างไฟล์ Class สำหรับเก็บข้อมูล JSON (model)
• การแปลง JSON เป็น Object ตัวแปรใน State
• แก้ปัญหากรณีมีค่าเป็น null
• ปรับแต่งแอพพลิเคชั่นให้มีความสวยงาม เช่นใส่ loading ใส่พื้นหลัง เป็นต้น