พัฒนาแอพมือถือ · MBC-20

Flutter Workshop for Beginners

หลักสูตร Flutter Workshop for Beginners เป็นการอบรมแบบเวิร์กชอปที่พาสร้างแอปข่าวด้วย Flutter ซึ่งดึงข้อมูลจาก WordPress REST API ครอบคลุม Layout หลายแบบ Infinite Scroll การแจ้งเตือน และแอปหลายภาษา เหมาะกับนักศึกษา ครู และนักไอทีที่เขียน Flutter เบื้องต้นได้แล้ว จบแล้วได้แอปข่าวที่พร้อม Release

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 8,550 บาท / ท่าน 9,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา18 ชั่วโมง · 3 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

เมื่อเขียน Flutter เบื้องต้นได้แล้ว ก้าวต่อไปที่หลายคนติดคือการสร้างแอปที่มีหลายหน้าจอ ดึงข้อมูลจริงจากระบบหลังบ้าน และมีฟีเจอร์ที่ผู้ใช้คาดหวัง เช่น โหลดข้อมูลต่อเมื่อเลื่อนถึงท้ายรายการ ดึงลงเพื่อรีเฟรช แจ้งเตือน และสลับภาษา การฝึกผ่านโปรเจกต์เดียวที่ใหญ่พอจะช่วยให้เห็นว่าแต่ละส่วนของแอปเชื่อมกันอย่างไร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่สำหรับ Flutter 3.47 และ Dart 3.13 เรียนแบบ Workshop ตลอดหลักสูตร โดยสร้างแอปข่าว (News App) ที่ดึงข้อมูลจาก WordPress REST API ตั้งแต่วางโครงสร้างโปรเจกต์ ออกแบบ Layout ด้วย NavigationBar, Drawer และ TabBar ให้รองรับแท็บเล็ต จัดการ State ด้วย Provider ทำ Infinite Scroll และ Pull to Refresh เพิ่ม Push Notification ด้วย OneSignal ทำแอปหลายภาษาด้วย gen-l10n จนถึง Build แอปเพื่อ Release (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

เตรียมเครื่องมือพัฒนา Flutter ทั้งบน Windows และ macOS และตรวจความพร้อมด้วย flutter doctor ได้
ใช้ฟีเจอร์ภาษา Dart 3 ที่จำเป็นต่องานจริง เช่น Records, Pattern และ async/await ได้
วางโครงสร้างโปรเจกต์ Flutter ให้แยกส่วนชัดเจนและรองรับแอปที่ใหญ่ขึ้นได้
ออกแบบ Layout ด้วย NavigationBar, Drawer และ TabBar ให้รองรับทั้งมือถือและแท็บเล็ตได้
สร้างแอปข่าวที่ดึงข้อมูลจาก WordPress REST API พร้อม Infinite Scroll และ Pull to Refresh ได้
จัดการ State ของแอปด้วย Provider และบันทึกค่าต่าง ๆ ไว้ในเครื่องได้
เพิ่ม Push Notification ด้วย OneSignal และทำแอปรองรับหลายภาษาด้วย gen-l10n ได้
Build แอปสำหรับ Release ทั้ง Android และ iOS ได้

หลักสูตรนี้เหมาะสำหรับ

นักเรียน นักศึกษา ที่เรียน Flutter เบื้องต้นมาแล้วและอยากทำแอปที่ใช้งานจริง
ครู อาจารย์ และวิทยากรที่ต้องการตัวอย่างโปรเจกต์ไว้ใช้สอน
นักไอที นักพัฒนาเว็บ หรือผู้ดูแลเว็บ WordPress ที่อยากทำแอปมือถือคู่กับเว็บ
ผู้สนใจพัฒนาแอปแบบ Cross Platform ด้วย Flutter

พื้นฐานของผู้เข้าอบรม

เขียน Flutter เบื้องต้นได้ หรือผ่านหลักสูตร Flutter for Beginners มาแล้ว
เข้าใจภาษา Dart ขั้นพื้นฐาน เช่น ตัวแปร ฟังก์ชัน และ Class
ไม่จำเป็นต้องเขียน Swift, Kotlin หรือ PHP มาก่อน
โน้ตบุ๊ก Windows หรือ macOS ที่มีพื้นที่ว่างเพียงพอและสิทธิ์ติดตั้งโปรแกรม

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่มาแทนหลักสูตร Flutter 3 Workshop (สำหรับผู้เริ่มต้น) รุ่นเดิม เนื้อหาเขียนใหม่และอัปเดตให้ตรงกับ Flutter 3.47 และ Dart 3.13 อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) เรียนแบบ Workshop ตลอดหลักสูตร ระดับ Beginner ต่อยอดจากหลักสูตร Flutter for Beginners

โดยสร้างแอปข่าวที่ดึงข้อมูลจาก WordPress REST API ตั้งแต่วางโครงสร้างโปรเจกต์ ออกแบบ Layout ที่รองรับแท็บเล็ต จัดการ State ด้วย Provider ทำ Infinite Scroll และ Pull to Refresh เพิ่ม Push Notification ด้วย OneSignal ทำแอปหลายภาษา จนถึง Build แอปเพื่อ Release เมื่อจบหลักสูตรต่อยอดไปยัง Flutter Intermediate ได้ ผู้เรียนจะได้ Lab Guide และซอร์สโค้ดแอปข่าวครบทุกขั้นตอนกลับไปใช้งานต่อ

Day 1 เครื่องมือ, Dart 3 และโครงแอป

Section 1: Lab: เตรียมเครื่องมือบน Windows และ macOS

ติดตั้ง Flutter SDK 3.47 บน Windows และ macOS พร้อมตั้งค่า PATH
ติดตั้ง VS Code กับ Flutter Extension และ Android Studio สำหรับ Android SDK
ติดตั้ง Xcode และ CocoaPods บน macOS สำหรับการรันบน iOS
สร้าง Android Emulator และ iOS Simulator แล้วทดสอบรันแอปตัวอย่าง
ตรวจความพร้อมของระบบด้วย flutter doctor และแก้ปัญหาที่เจอบ่อย

Section 2: Lab: อัปเดตภาษา Dart 3 ที่ใช้ในงานจริง

Sound Null Safety และการจัดการค่า null อย่างปลอดภัย
Records, Pattern Matching และ switch แบบ Expression
Class Modifiers: sealed, final, base และ interface ใช้เมื่อไร
Asynchronous Programming ด้วย Future, async, await และ Stream
จัดการ Exception และวันที่เวลาด้วย DateTime และ Package intl

Section 3: Lab: วางโครงสร้างโปรเจกต์ให้รองรับแอปใหญ่

แยกโฟลเดอร์ screens, widgets, models, services, theme และ utils
เก็บค่าคงที่ สี และสไตล์ไว้ที่เดียว แล้วเรียกใช้ทั่วแอป
สร้าง Custom Widget ที่นำกลับมาใช้ซ้ำได้ทั้งโปรเจกต์
กำหนด Theme ด้วย ColorScheme.fromSeed และรองรับ Dark Mode
ใช้ flutter analyze และ Lint รักษาคุณภาพโค้ด และนำโครงนี้ไปเริ่มโปรเจกต์อื่น

Section 4: Lab: Layout หลักด้วย NavigationBar, Drawer และ TabBar

เมนูด้านล่างด้วย NavigationBar แบบ Material 3
เมนูด้านข้างด้วย NavigationDrawer พร้อมส่วนหัวและหมวดหมู่
แบ่งหมวดเนื้อหาด้วย TabBar และ TabBarView
รวมทั้งสามแบบในแอปเดียวโดยไม่ให้ผู้ใช้สับสน
Lab: สร้างโครงหน้าจอหลักของแอปข่าว

Section 5: Lab: Layout ที่ปรับตามมือถือและแท็บเล็ต

แนวคิด Adaptive Layout และการกำหนด Breakpoint
ใช้ LayoutBuilder และ MediaQuery.sizeOf ตรวจขนาดหน้าจอ
สลับ NavigationBar เป็น NavigationRail เมื่อจอกว้าง
แสดงรายการกับรายละเอียดคู่กันบนแท็บเล็ต
Lab: ทดสอบแอปบนมือถือ แท็บเล็ต และการหมุนจอ

Day 2 WordPress, Provider และรายการข่าว

Section 6: Lab: เตรียม WordPress เป็นระบบหลังบ้าน

ติดตั้ง WordPress 7 ในเครื่องด้วย XAMPP หรือ Docker
สร้างหมวดหมู่ ข่าว และรูปภาพหน้าปกสำหรับทดสอบ
ทดลองเรียก WordPress REST API ที่ /wp-json/wp/v2 ผ่านเบราว์เซอร์และ Postman
ใช้พารามิเตอร์ categories, search, page, per_page และ _embed
ยืนยันตัวตนด้วย Application Passwords สำหรับ Endpoint ที่ต้องล็อกอิน

Section 7: Lab: เริ่มโปรเจกต์ News App พร้อม Provider

ภาพรวมแอปข่าวและหน้าจอทั้งหมดที่จะสร้าง
ติดตั้ง Package provider และวาง ChangeNotifier ของแต่ละส่วน
ใช้ MultiProvider, context.watch และ context.read อย่างถูกที่
แยกสถานะกำลังโหลด สำเร็จ และผิดพลาดให้หน้าจอแสดงผลถูกต้อง

Section 8: Lab: Model และ Service เรียก WordPress REST API

สร้าง Model ข่าวและหมวดหมู่ด้วย fromJson ที่รับค่า null ได้
เขียน Service เรียก API ด้วย Package http แยกจากหน้าจอ
ดึงรายการข่าวตามหมวดหมู่และรายละเอียดข่าวทีละรายการ
แสดงรูปหน้าปกจากข้อมูล _embed และจัดการข้อความ HTML ในหัวข่าว
จัดการ Timeout และข้อความแจ้งเมื่อเชื่อมต่อไม่ได้

Section 9: Lab: ListView แนวตั้งและแนวนอนในหน้าเดียว

ListView.builder และ ListView.separated สำหรับรายการข่าว
ข่าวเด่นแบบเลื่อนแนวนอนวางคู่กับรายการแนวตั้งในหน้าเดียว
ใช้ CustomScrollView และ Sliver เมื่อหน้าจอมีหลายส่วน
แคชรูปภาพด้วย cached_network_image พร้อมรูปสำรองเมื่อโหลดไม่สำเร็จ
ปรับการแสดงผลให้ถูกต้องทั้งบนมือถือและแท็บเล็ต

Section 10: Lab: Infinite Scroll และ Pull to Refresh

โหลดข่าวทีละชุดด้วย page และ per_page ของ REST API
ตรวจตำแหน่งการเลื่อนด้วย ScrollController แล้วโหลดชุดถัดไปอัตโนมัติ
อ่านจำนวนหน้าทั้งหมดจาก Header X-WP-TotalPages เพื่อหยุดโหลด
รีเฟรชเนื้อหาด้วย RefreshIndicator เมื่อดึงหน้าจอลง
Lab: รวม Infinite Scroll และ Pull to Refresh ในหน้าเดียวกัน

Day 3 ฟีเจอร์แอปจริงและการ Release

Section 11: Lab: รายละเอียดข่าว ค้นหา และข่าวที่บันทึกไว้

หน้ารายละเอียดข่าวพร้อมแสดงเนื้อหา HTML และรูปภาพ
ช่องค้นหาข่าวที่ส่งคำค้นไปยัง REST API
บันทึกข่าวที่ชอบไว้ในเครื่องด้วย shared_preferences
แชร์ข่าวด้วย share_plus และเปิดลิงก์ภายนอกด้วย url_launcher

Section 12: Lab: Push Notification ด้วย OneSignal

ภาพรวมการทำงานของ Push Notification บน Android และ iOS
สมัคร OneSignal แบบฟรีและเชื่อมกับโปรเจกต์ Firebase สำหรับ Android
ติดตั้ง onesignal_flutter แล้วเริ่มต้นด้วย OneSignal.initialize
ขอสิทธิ์แจ้งเตือนและให้ผู้ใช้เปิดหรือปิดการแจ้งเตือนในแอปได้
ส่งแจ้งเตือนข่าวใหม่จาก Dashboard แล้วเปิดหน้าข่าวเมื่อแตะ

Section 13: Lab: แอปหลายภาษาด้วย gen-l10n

ตั้งค่า flutter_localizations และ generate: true ใน pubspec.yaml
สร้างไฟล์ ARB ภาษาไทยและอังกฤษ พร้อมกำหนด l10n.yaml
เรียกใช้ข้อความผ่าน AppLocalizations และใช้ข้อความแบบมีตัวแปร
ให้ผู้ใช้สลับภาษาเองและจำค่าที่เลือกด้วย Provider และ shared_preferences
จัดรูปแบบวันที่ให้ตรงกับภาษาที่เลือก

Section 14: Lab: Build และเตรียม Release ทั้ง Android และ iOS

เปลี่ยนไอคอนแอปด้วย flutter_launcher_icons และเปลี่ยนชื่อแอป
กำหนด Application ID, Bundle Identifier และเลขเวอร์ชันของแอป
Sign แอป Android ด้วย Keystore และตั้งค่า Signing ของ iOS ใน Xcode
Build App Bundle สำหรับ Android และไฟล์สำหรับ iOS
ภาพรวมการส่งแอปขึ้น Google Play และ App Store

Section 15: Workshop: News App ฉบับสมบูรณ์

รวมทุกฟีเจอร์เข้าด้วยกันและทดสอบบนเครื่องจริง
ปรับ Theme, Dark Mode และหน้าจอว่างเมื่อไม่มีข้อมูล
ไล่แก้ปัญหาด้วย Flutter DevTools ก่อนส่งงาน
นำเสนอผลงาน รีวิวร่วมกัน และแนะนำเส้นทางเรียนขั้นต่อไป

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

ทำ Infinite Scroll ใน ListView ของ Flutter ทำอย่างไร

ใส่ ScrollController ให้ ListView แล้วฟังตำแหน่งการเลื่อน เมื่อผู้ใช้เลื่อนใกล้ท้ายรายการให้เรียก API หน้าถัดไปด้วยพารามิเตอร์ page และ per_page แล้วต่อข้อมูลใหม่เข้ากับรายการเดิม ต้องมีตัวแปรกันการโหลดซ้ำระหว่างรอผล และหยุดโหลดเมื่อถึงหน้าสุดท้าย ซึ่ง WordPress REST API บอกจำนวนหน้าทั้งหมดไว้ใน Header X-WP-TotalPages หลักสูตรนี้ทำร่วมกับ RefreshIndicator เพื่อให้ดึงหน้าจอลงแล้วรีเฟรชได้ในหน้าเดียวกัน

Records และ Pattern Matching ใน Dart 3 คืออะไร

Records คือการรวมหลายค่าเป็นก้อนเดียวโดยไม่ต้องสร้าง Class เช่น ให้ฟังก์ชันคืนค่าทั้งข้อมูลและสถานะพร้อมกัน ส่วน Pattern Matching ช่วยแยกค่าออกจาก Record, List หรือ Object แล้วตรวจเงื่อนไขในคราวเดียว ใช้ร่วมกับ switch แบบ Expression และ sealed class ได้ ทำให้โค้ดจัดการสถานะต่าง ๆ ของแอป เช่น กำลังโหลด สำเร็จ และผิดพลาด สั้นและครบทุกกรณี

ดึงข่าวจาก WordPress มาแสดงในแอป Flutter ทำอย่างไร

WordPress มี REST API ในตัวที่ /wp-json/wp/v2/posts จึงไม่ต้องเขียนหลังบ้านเพิ่ม ในแอปให้สร้าง Model ด้วย fromJson เขียน Service เรียก API ด้วย Package http ใส่พารามิเตอร์ categories เพื่อกรองหมวดหมู่ และ _embed เพื่อให้ได้รูปหน้าปกมาพร้อมกัน จากนั้นแสดงผลผ่าน Provider และ ListView ส่วน Endpoint ที่ต้องล็อกอินใช้ Application Passwords ของ WordPress ในการยืนยันตัวตน

หลักสูตร Flutter Workshop for Beginners เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักเรียนนักศึกษา ครู อาจารย์ นักไอที และนักพัฒนาเว็บหรือผู้ดูแลเว็บ WordPress ที่อยากทำแอปมือถือ ควรเขียน Flutter เบื้องต้นได้หรือผ่านหลักสูตร Flutter for Beginners มาแล้ว และเข้าใจภาษา Dart ขั้นพื้นฐาน ไม่จำเป็นต้องเขียน Swift, Kotlin หรือ PHP มาก่อน ควรนำโน้ตบุ๊ก Windows หรือ macOS ที่ติดตั้งโปรแกรมได้มาด้วย

เรียนจบหลักสูตร Flutter Workshop for Beginners แล้วทำอะไรได้บ้าง

วางโครงสร้างโปรเจกต์ Flutter ให้รองรับแอปที่ใหญ่ขึ้น ออกแบบ Layout ด้วย NavigationBar, Drawer และ TabBar ที่ปรับตามแท็บเล็ต ดึงข้อมูลจาก WordPress REST API จัดการ State ด้วย Provider ทำ Infinite Scroll และ Pull to Refresh เพิ่ม Push Notification ด้วย OneSignal ทำแอปหลายภาษาด้วย gen-l10n และ Build แอปเพื่อ Release ทั้ง Android และ iOS ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Flutter Workshop for Beginners ให้ทีมในองค์กรได้ไหม

ได้ สถาบันไอทีจีเนียสรับจัดอบรมแบบ In-house ให้ทีมในองค์กร สามารถปรับตัวอย่าง Workshop ให้ใกล้กับงานของทีม เช่น เปลี่ยนจากแอปข่าวเป็นแอปประกาศภายในที่ดึงข้อมูลจาก WordPress ขององค์กร และเลือกเน้นหัวข้อที่ทีมต้องใช้ได้ สอบถามรายละเอียดและขอใบเสนอราคาได้ผ่านช่องทางติดต่อของสถาบัน