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

Flutter Intermediate

หลักสูตร Flutter Intermediate เป็นการอบรมการพัฒนาแอปมือถือด้วย Flutter ในระดับที่เชื่อมกับระบบหลังบ้าน ตั้งแต่ทำ REST API ด้วย Laravel, CRUD ผ่าน API, Provider, Animation, Login ด้วย Firebase จนถึง Google Maps และการสแกน QR Code เหมาะกับนักศึกษา นักพัฒนาเว็บ และนักไอทีที่เขียน Flutter เบื้องต้นได้แล้ว

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

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

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

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

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

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่สำหรับ Flutter 3.47 และ Dart 3.13 ต่อยอดจากระดับเริ่มต้น โดยเริ่มจากเตรียม REST API ด้วย Laravel 13 และ Sanctum แล้วออกแบบ UI แบบ Responsive และ Adaptive ทำ Animation จัดการ State ด้วย Provider ทำ CRUD ผ่าน API ระบบ Login ด้วย Token และ Firebase Authentication กับ Google และ Facebook ใช้ Google Maps และสแกน QR Code กับ Barcode แล้วรวมทุกอย่างใน Workshop แอปตรวจนับครุภัณฑ์ (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Intermediate)

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

สร้าง REST API ด้วย Laravel 13 และป้องกัน Endpoint ด้วย Sanctum Token ได้
ออกแบบ UI แบบ Responsive และ Adaptive ให้รองรับทั้งมือถือและแท็บเล็ตได้
ทำ Animation ทั้งแบบ Implicit, AnimationController และ Hero ได้
จัดการ State ของแอปด้วย Provider และแยก Class ให้เหมาะกับโปรเจกต์ที่ใหญ่ขึ้นได้
เขียน Flutter เรียกแสดง เพิ่ม แก้ไข และลบข้อมูลผ่าน API ร่วมกับฐานข้อมูล MySQL ได้
ทำระบบ Login ด้วย Token และ Firebase Authentication กับ Google และ Facebook ได้
แสดงแผนที่ Google Maps พร้อมหมุดจากข้อมูล API และตำแหน่งปัจจุบันได้
สแกน QR Code และ Barcode แล้วส่งผลไปยัง API ได้

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

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

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

เขียน Flutter เบื้องต้นได้ หรือผ่านหลักสูตร Flutter for Beginners มาแล้ว
มีพื้นฐานภาษา Dart หากยังไม่คล่องจะมีการทบทวนให้ระหว่างเรียน
ไม่จำเป็นต้องเขียน PHP หรือ Laravel มาก่อน วิทยากรเตรียมโค้ด API ให้ทำตามได้
ไม่จำเป็นต้องเขียน Swift หรือ Kotlin มาก่อน และเคยใช้งานแอปบน Android หรือ iOS

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

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

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

ผู้เรียนจะได้ทำทั้งฝั่ง REST API ด้วย Laravel และฝั่งแอป Flutter ครอบคลุม UI ที่ปรับตามจอ Animation, Provider, CRUD ผ่าน API, Login ด้วย Token และ Firebase กับ Google และ Facebook, Google Maps และการสแกน QR Code กับ Barcode แล้วรวมทุกอย่างใน Workshop แอปตรวจนับครุภัณฑ์ เมื่อจบหลักสูตรต่อยอดไปยัง Flutter Advanced ได้ ผู้เรียนจะได้ Lab Guide และซอร์สโค้ดทั้งสองฝั่งกลับไปใช้งานต่อ

Day 1 API หลังบ้านและ UI ที่ปรับตามจอ

Section 1: Lab: เตรียม REST API ด้วย Laravel 13

ติดตั้ง PHP, Composer และ Laravel ด้วย Laravel Herd หรือ XAMPP
สร้างโปรเจกต์ Laravel 13 และเชื่อมฐานข้อมูล MySQL
ออกแบบตารางด้วย Migration และสร้าง Model ด้วย Eloquent
เปิดใช้ API ด้วย php artisan install:api และเขียน Route ใน routes/api.php
เขียน CRUD API ด้วย Controller และ API Resource แล้วทดสอบด้วย Postman

Section 2: Lab: ป้องกัน API ด้วย Sanctum Token

ภาพรวม Laravel Sanctum สำหรับยืนยันตัวตนจากแอปมือถือ
สร้าง Endpoint Login ที่คืน Token ด้วย createToken
ป้องกัน Route ด้วย Middleware auth:sanctum และทำ Logout
ตรวจข้อมูลที่ส่งเข้ามาด้วย Validation และตอบ Error เป็น JSON
รองรับการอัปโหลดรูปภาพสำหรับข้อมูลแต่ละรายการ

Section 3: Lab: Responsive และ Adaptive UI

ความต่างระหว่าง Responsive กับ Adaptive และการเลือก Breakpoint
ใช้ LayoutBuilder และ MediaQuery.sizeOf จัดหน้าจอตามพื้นที่
สลับ NavigationBar กับ NavigationRail และทำหน้าจอแบบ List คู่กับ Detail
ใช้วิดเจ็ตแบบ .adaptive ให้หน้าตาเข้ากับ Android และ iOS
รองรับการหมุนจอและการขยายขนาดตัวอักษรของผู้ใช้

Section 4: Lab: แยก Component และแก้ปัญหาหลายขนาดจอ

แยก Widget ตามหน้าที่และส่งข้อมูลผ่าน Constructor
เก็บสี ระยะ และสไตล์ไว้ใน Theme และ ThemeExtension
แก้ปัญหา Overflow และข้อความล้นบนจอเล็ก
ทดสอบหลายขนาดจอด้วย Emulator, Simulator และแท็บเล็ตจริง
Lab: สร้างชุด Component ของแอปที่ใช้ต่อในทุก Workshop

Section 5: Lab: เริ่มต้น Animation แบบ Implicit

แนวคิด Animation ใน Flutter: Implicit กับ Explicit ต่างกันอย่างไร
AnimatedContainer, AnimatedOpacity และ AnimatedAlign
TweenAnimationBuilder สำหรับค่าที่เปลี่ยนแบบกำหนดเอง
AnimatedSwitcher สำหรับสลับเนื้อหาอย่างนุ่มนวล
Lab: เพิ่ม Animation ให้การ์ดและปุ่มของแอปตัวอย่าง

Day 2 Animation, State และ CRUD ผ่าน API

Section 6: Lab: AnimationController, Tween และ Hero

สร้าง AnimationController พร้อม Tween และ CurvedAnimation
ใช้ AnimatedBuilder และ Transition Widget ควบคุมการเคลื่อนไหว
Hero Animation ระหว่างหน้ารายการกับหน้ารายละเอียด
ทำ Transition ตอนเปลี่ยนหน้าด้วย PageRouteBuilder
ประยุกต์ Animation กับโปรเจกต์ตัวอย่างโดยไม่ให้แอปช้า

Section 7: Lab: จัดการ State ด้วย Provider

ปัญหาการส่ง State ข้ามหลายหน้าจอเมื่อแอปเริ่มใหญ่
ChangeNotifier, ChangeNotifierProvider และ MultiProvider
context.watch, context.read และ Selector ลดการ Rebuild ที่ไม่จำเป็น
แยก Class ของ Provider ตามส่วนงานให้รองรับโปรเจกต์ขนาดใหญ่
ภาพรวม Riverpod และ Bloc เพื่อเลือกใช้ในขั้นต่อไป

Section 8: Lab: เชื่อม Flutter กับ Laravel API

ติดตั้ง Package http และกำหนด Base URL สำหรับ Emulator และเครื่องจริง
เขียน Service และ Repository แยกการเรียก API ออกจากหน้าจอ
สร้าง Model ด้วย fromJson และ toJson
แสดงข้อมูลจาก API ใน ListView พร้อมสถานะโหลดและข้อผิดพลาด
จัดการ Error, Timeout และรหัสสถานะ HTTP อย่างเป็นระบบ

Section 9: Workshop: CRUD ข้อมูลผ่าน API

สร้างฟอร์มเพิ่มข้อมูลพร้อมตรวจสอบค่าที่กรอก
แก้ไขข้อมูลเดิมและส่งค่าที่เปลี่ยนไปยัง API
ลบข้อมูลพร้อมยืนยันก่อนลบ
เลือกรูปจากกล้องหรือคลังภาพด้วย image_picker แล้วอัปโหลดไปยัง API
Workshop: อัปเดตรายการทันทีหลังเพิ่ม แก้ไข หรือลบ

Section 10: Lab: Login ด้วย Token และเก็บอย่างปลอดภัย

หน้า Login ที่เรียก Endpoint ของ Sanctum แล้วรับ Token
เก็บ Token ด้วย flutter_secure_storage แทนการเก็บแบบข้อความธรรมดา
แนบ Bearer Token ทุก Request และจัดการเมื่อ Token หมดอายุ
เข้าระบบอัตโนมัติเมื่อเปิดแอปใหม่และทำ Logout

Day 3 Firebase Auth, แผนที่ และการสแกน

Section 11: Lab: Firebase Authentication กับ Google Sign-In

สร้างโปรเจกต์ใน Firebase Console และเปิดใช้ Authentication
ตั้งค่า Firebase ให้แอปด้วย FlutterFire CLI
ใช้ google_sign_in รุ่น 7: initialize, authenticate และ authenticationEvents
ส่งข้อมูลจาก Google เข้าสู่ Firebase Auth และแสดงข้อมูลผู้ใช้
ตั้งค่า SHA-1 สำหรับ Android และ URL Scheme สำหรับ iOS

Section 12: Lab: Login ด้วย Facebook ผ่าน Firebase

สร้างแอปใน Meta for Developers และเปิดใช้ Facebook Login
ผูก App ID และ Client Token เข้ากับโปรเจกต์ Android และ iOS
ใช้ Package flutter_facebook_auth แล้วส่ง Credential เข้า Firebase Auth
รวมปุ่ม Login หลายแบบในหน้าเดียวและจัดการกรณีผู้ใช้ยกเลิก

Section 13: Lab: Google Maps และตำแหน่งปัจจุบัน

สร้าง API Key ใน Google Cloud และจำกัดสิทธิ์ให้ใช้กับแอปเท่านั้น
ติดตั้ง google_maps_flutter และแสดงแผนที่ในแอป
ปักหมุด Marker พร้อม Info Window แสดงรายละเอียด
ดึงพิกัด lat และ lng จาก API มาแสดงบนแผนที่
ขอสิทธิ์และอ่านตำแหน่งปัจจุบันด้วย Package geolocator

Section 14: Lab: สแกน QR Code และ Barcode

ออกแบบหน้าจอสแกนพร้อมกรอบเล็งและปุ่มเปิดไฟฉาย
ติดตั้ง mobile_scanner และตั้งค่าสิทธิ์กล้องบน Android และ iOS
อ่านค่าจาก onDetect และกำหนดชนิด Barcode ที่ต้องการ
ส่งค่าที่สแกนไปตรวจสอบกับ API แล้วแสดงผล
สร้าง QR Code ของข้อมูลแต่ละรายการด้วย qr_flutter

Section 15: Workshop: แอปตรวจนับครุภัณฑ์

Login แล้วดูรายการครุภัณฑ์จาก Laravel API
สแกน QR Code บนครุภัณฑ์เพื่อเปิดข้อมูลและบันทึกการตรวจนับ
บันทึกพิกัดจุดที่ตรวจและแสดงบน Google Maps
นำเสนอผลงาน รีวิวร่วมกัน และแนะนำเส้นทางสู่ Flutter Advanced

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

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

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

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

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

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

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

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

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

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

ทำ Animation ใน Flutter มีวิธีไหนบ้าง

แบ่งได้เป็นสองแบบหลัก แบบ Implicit ใช้วิดเจ็ตสำเร็จรูปอย่าง AnimatedContainer, AnimatedOpacity หรือ TweenAnimationBuilder เพียงเปลี่ยนค่า Flutter จะค่อย ๆ เปลี่ยนให้เอง เหมาะกับงานส่วนใหญ่ ส่วนแบบ Explicit ใช้ AnimationController ร่วมกับ Tween และ CurvedAnimation เมื่อต้องควบคุมจังหวะเอง เช่น เล่นซ้ำ ย้อนกลับ หรือเรียงหลายจังหวะ นอกจากนี้มี Hero สำหรับเคลื่อนวิดเจ็ตข้ามหน้าจอ และ PageRouteBuilder สำหรับ Transition ตอนเปลี่ยนหน้า

Provider ใน Flutter คืออะไร ใช้จัดการ State อย่างไร

Provider เป็น Package ที่ช่วยส่ง State ไปยังวิดเจ็ตที่ต้องใช้โดยไม่ต้องส่งต่อผ่าน Constructor ทีละชั้น เก็บข้อมูลและ Logic ไว้ใน Class ที่สืบทอด ChangeNotifier แล้วเรียก notifyListeners เมื่อข้อมูลเปลี่ยน ครอบแอปด้วย ChangeNotifierProvider หรือ MultiProvider แล้วใช้ context.watch ในส่วนที่ต้องแสดงผลใหม่ context.read สำหรับเรียกคำสั่ง และ Selector เพื่อลดการ Rebuild ที่ไม่จำเป็น

ออกแบบแอป Flutter ให้รองรับทั้งมือถือและแท็บเล็ตทำอย่างไร

ใช้ LayoutBuilder หรือ MediaQuery.sizeOf อ่านพื้นที่ที่มีจริง แล้วกำหนด Breakpoint เพื่อเปลี่ยน Layout เช่น ใช้ NavigationBar บนมือถือ และ NavigationRail บนจอกว้าง แสดงรายการกับรายละเอียดคู่กันบนแท็บเล็ต แยกส่วนหน้าจอเป็น Component ที่ใช้ซ้ำได้ และทดสอบการหมุนจอกับการขยายตัวอักษรของผู้ใช้ด้วย หากต้องการให้หน้าตาเข้ากับแต่ละระบบ ใช้วิดเจ็ตแบบ .adaptive ที่ปรับตาม Android และ iOS

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

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

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

สร้าง REST API ด้วย Laravel 13 และป้องกันด้วย Sanctum ออกแบบ UI ที่ปรับตามมือถือและแท็บเล็ต ทำ Animation จัดการ State ด้วย Provider ทำ CRUD ผ่าน API ทำระบบ Login ด้วย Token และ Firebase กับ Google และ Facebook แสดงแผนที่ Google Maps และสแกน QR Code กับ Barcode แล้วนำทุกอย่างมารวมเป็นแอปตรวจนับครุภัณฑ์ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

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

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