What is the difference between StatelessWidget and StatefulWidget in Flutter?

A StatelessWidget is for parts that never change once built, such as fixed text or icons. A StatefulWidget has a separate State object holding data that changes while the app runs, such as the number in a counter app. When that data changes you call setState and Flutter rebuilds that part of the screen. As an app grows, state shared by several screens is better moved into a ChangeNotifier that screens listen to through ListenableBuilder or the provider package.

How do you lay out screens in Flutter with Row, Column and Expanded?

Row arranges child widgets horizontally and Column vertically; mainAxisAlignment positions them along the main axis and crossAxisAlignment along the cross axis. To let a child fill the remaining space, wrap it in Expanded and use flex to set proportions. Container adds padding, borders and background colour, Stack layers widgets, SafeArea keeps content clear of screen notches, and LayoutBuilder lets a screen adapt to the device size.

What are the steps to show data from a web API in a Flutter app?

Add the http package with flutter pub add http, then write an async function that calls the API with http.get and waits with await. Decode the JSON with jsonDecode and turn it into objects through a model class with a fromJson constructor. Display the data with FutureBuilder, showing loading and error states and handling null values. This course works through every step with a weather app using the Open-Meteo API.

Who is the Flutter for Beginners course for, and what should I know beforehand?

It suits students, teachers, IT staff, web developers and anyone interested in cross-platform app development. Some programming experience helps, and Dart is covered from the basics on the first day. You do not need Swift, Kotlin or Java experience, and you should bring a Windows or macOS laptop on which you can install software.

What will I be able to do after the Flutter for Beginners course?

You will be able to install the Flutter SDK and run apps on emulators, simulators and real devices, change an app's name, icon and splash screen, build Material 3 layouts, manage state with setState and ChangeNotifier, create a BMI calculator, a contact list app that saves data on the device and a weather app driven by a web API, debug with DevTools and build an installable app. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Which tools are used on the Flutter for Beginners course?

You use the latest stable Flutter SDK with Dart 3, write code in VS Code with the Flutter extension, and use Android Studio for the Android SDK and emulator. The iOS simulator is available only on a Mac with Xcode, and apps are also tested on real phones. You check your setup with flutter doctor and track down problems with Flutter DevTools. Installation is covered for both Windows and macOS.

ພັດທະນາແອັບມືຖື · MBC-21

Flutter for Beginners

หลักสูตร Flutter for Beginners เป็นการอบรมพื้นฐานการสร้างแอปมือถือแบบ Cross Platform ด้วย Flutter และภาษา Dart ตั้งแต่ติดตั้งเครื่องมือ จัด Layout ด้วย Material 3 จัดการ State จนถึงดึงข้อมูลจาก Web API เหมาะกับนักศึกษา ครู อาจารย์ และนักไอที จบแล้วสร้างแอป Android และ iOS ของตัวเองได้

ອັບເດດລ່າສຸດ 8 ຕ.ລ. 2026

ລາຄາເລີ່ມຕົ້ນ 6,750 ບາດ / ທ່ານ 7,500 −10% ຍັງບໍ່ລວມ VAT 7% · ມີລາຄາໝູ່ຄະນະ

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ ລົງຊື່ຈອງໄວ້

PDFດາວໂຫຼດ Course Outline

ໄລຍະເວລາ18 ຊົ່ວໂມງ · 3 ມື້
ຮູບແບບຢູ່ສະຖາບັນ / ອອນລາຍສົດ
ຮອບຕໍ່ໄປເປີດຕາມຄຳຂໍ
ໃບຢັ້ງຢືນມີໃບຢັ້ງຢືນ

ພາບລວມຫຼັກສູດ

ถ้าอยากเริ่มสร้างแอปมือถือที่ใช้ได้ทั้ง Android และ iOS จากโค้ดชุดเดียว Flutter ยังเป็นตัวเลือกที่ได้รับความนิยมสูง เพราะเขียนด้วยภาษา Dart ภาษาเดียว แสดงผลได้ลื่นใกล้เคียงแอป Native และเห็นผลการแก้โค้ดทันทีด้วย Hot Reload แต่ผู้เริ่มต้นจำนวนมากติดตั้งเครื่องมือไม่ผ่าน งงกับโครงสร้างโปรเจกต์ และจัด Layout หรือจัดการ State ไม่เป็น จนเลิกไปก่อนจะได้แอปที่ใช้งานจริง

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่สำหรับ Flutter 3.47 และ Dart 3.13 พาผู้เรียนตั้งแต่ติดตั้งเครื่องมือ ปูพื้นภาษา Dart 3 สร้างแอปแรก อธิบายโครงสร้างโปรเจกต์ทีละไฟล์ จัด Layout ด้วยวิดเจ็ตหลักตามแนวทาง Material 3 เข้าใจ State ตั้งแต่ setState ถึง ChangeNotifier แล้วลงมือทำ Workshop แอปคำนวณ BMI แอปรายชื่อผู้ติดต่อ และแอปพยากรณ์อากาศที่ดึงข้อมูลจาก Web API พร้อมฝึก Debug ด้วย DevTools และ Build แอปเพื่อนำไปติดตั้ง (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Beginner)

ສິ່ງທີ່ທ່ານຈະໄດ້ຮັບ

ติดตั้ง Flutter SDK, VS Code และเครื่องมือ Android หรือ iOS แล้วตรวจความพร้อมด้วย flutter doctor ได้
เขียนภาษา Dart 3 ขั้นพื้นฐานที่จำเป็นต่อการสร้างแอป Flutter ได้
เข้าใจโครงสร้างโปรเจกต์ Flutter และรันแอปบน Emulator, Simulator และเครื่องจริงได้
จัด Layout ด้วยวิดเจ็ตหลักและกำหนด Theme แบบ Material 3 ได้
จัดการ State ด้วย setState และ ChangeNotifier และสร้างแอปหลายหน้าจอได้
สร้างฟอร์ม รายการข้อมูล และบันทึกข้อมูลไว้ในเครื่องได้
ดึงข้อมูลจาก Web API มาแสดงผลพร้อมจัดการสถานะโหลดและข้อผิดพลาดได้
Debug แอปด้วย DevTools และ Build แอปสำหรับติดตั้งได้

ຫຼັກສູດນີ້ເໝາະສຳລັບ

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

ພື້ນຖານຂອງຜູ້ເຂົ້າຝຶກອົບຮົມ

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

ຫົວຂໍ້ການຝຶກອົບຮົມ

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

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

จึงเหมาะกับผู้ที่เพิ่งเริ่ม Flutter เป็นครั้งแรก ผู้เรียนจะได้สร้างแอปคำนวณ BMI แอปรายชื่อผู้ติดต่อ และแอปพยากรณ์อากาศที่ดึงข้อมูลจาก Web API พร้อมฝึก Debug ด้วย DevTools และ Build แอปเพื่อติดตั้ง เมื่อจบหลักสูตรต่อยอดไปยัง Flutter ขั้นกลางและขั้นสูงได้ ผู้เรียนจะได้ Lab Guide และซอร์สโค้ดครบทุก Workshop กลับไปใช้งานต่อ

Day 1 เริ่มต้น Flutter และแอปแรก

Section 1: Lab: ภาพรวมการพัฒนาแอปและติดตั้งเครื่องมือ

รูปแบบการพัฒนาแอปมือถือ: Native, Cross Platform และ Web App ต่างกันอย่างไร
รู้จัก Flutter 3.47 และ Dart 3.13 จุดเด่น ข้อจำกัด และสิ่งที่ควรรู้ก่อนเริ่ม
ติดตั้ง Flutter SDK บน Windows และ macOS พร้อมตั้งค่า PATH
ติดตั้ง VS Code กับ Flutter Extension และ Android Studio สำหรับ Android SDK
สร้าง Android Emulator และ iOS Simulator แล้วตรวจความพร้อมด้วย flutter doctor

Section 2: Lab: ปูพื้นภาษา Dart 3 สำหรับ Flutter

ตัวแปร ชนิดข้อมูล final, const และ Null Safety
เงื่อนไข ลูป ฟังก์ชัน และ Named Parameter ที่ Flutter ใช้บ่อย
Class, Constructor, List และ Map สำหรับเก็บข้อมูลของแอป
ฟีเจอร์ Dart 3 ที่ช่วยให้โค้ดสั้นลง: Records, Pattern, switch แบบ Expression และ Dot Shorthand
Lab: เขียนโปรแกรม Dart สั้น ๆ บน DartPad และในเครื่อง

Section 3: Lab: สร้างโปรเจกต์แรกและเข้าใจโครงสร้าง

สร้างโปรเจกต์ใหม่ด้วย flutter create และจาก VS Code
อธิบายโครงสร้างทีละส่วน: lib/main.dart, pubspec.yaml, โฟลเดอร์ android และ ios
รันแอปบน Emulator, Simulator และมือถือจริงผ่านสาย USB หรือ Wi-Fi
Hot Reload กับ Hot Restart ต่างกันอย่างไร และใช้เมื่อไร

Section 4: Lab: Widget และแอป Counter ด้วย Material 3

แนวคิด Widget Tree และการประกอบหน้าจอจากวิดเจ็ตเล็ก ๆ
MaterialApp, Scaffold, AppBar, Text และ FloatingActionButton
กำหนด Theme ด้วย ColorScheme.fromSeed และรองรับ Dark Mode
ปุ่มแบบ Material 3: FilledButton, OutlinedButton และ IconButton
Lab: เขียนแอป Counter ใหม่ทั้งหมดพร้อมปุ่มเพิ่ม ลด และล้างค่า

Section 5: Lab: ปรับแต่งแอปและติดตั้ง Package

เปลี่ยนชื่อแอป Application ID และ Bundle Identifier
ค้นหาและเลือก Package จาก pub.dev อย่างมีหลักเกณฑ์
เพิ่ม Package ใน pubspec.yaml ด้วย flutter pub add
เปลี่ยนไอคอนแอปด้วย flutter_launcher_icons ทั้ง Android และ iOS
สร้าง Splash Screen ด้วย flutter_native_splash ให้รองรับ Android 12 ขึ้นไป

Day 2 Layout, State และแอปหลายหน้าจอ

Section 6: Lab: Layout ที่ผู้เริ่มต้นต้องใช้เป็น

Container, Padding และ BoxDecoration สำหรับระยะ ขอบ สี และมุมโค้ง
Row และ Column พร้อม mainAxisAlignment และ crossAxisAlignment
Expanded, Flexible และ SizedBox สำหรับแบ่งพื้นที่
Stack, Positioned และ Align สำหรับวางวิดเจ็ตซ้อนกัน
SafeArea และการแก้ปัญหา Overflow ที่เจอบ่อย

Section 7: Lab: หน้าจอหลายขนาด รูปภาพ ไอคอน และฟอนต์

ทำหน้าจอให้รองรับมือถือและแท็บเล็ตด้วย LayoutBuilder และ MediaQuery
Wrap และ FractionallySizedBox สำหรับ Layout ที่ยืดหยุ่น
จัดการรูปภาพและ Assets ใน pubspec.yaml และแสดงรูปจากอินเทอร์เน็ต
ใช้ Icon และเพิ่มฟอนต์ภาษาไทยให้แอป
Lab: สร้างหน้า Profile Card ที่แสดงผลดีทุกขนาดจอ

Section 8: Lab: เข้าใจ State ใน Flutter

State คืออะไร และ StatelessWidget กับ StatefulWidget ต่างกันอย่างไร
setState และวงจรชีวิตของ State: initState และ dispose
ส่งข้อมูลระหว่างวิดเจ็ตด้วย Constructor และ Callback
ย้าย State ออกจากวิดเจ็ตด้วย ChangeNotifier และ ListenableBuilder
ภาพรวม Package provider และเมื่อไรควรใช้ State Management

Section 9: Workshop: แอปคำนวณ BMI

ออกแบบหน้าจอด้วย Layout ที่เรียนมาและแยก Custom Widget ใช้ซ้ำ
รับค่าจากผู้ใช้ด้วย GestureDetector, InkWell, Slider และ SegmentedButton
สร้างแอปมากกว่าหนึ่งหน้าจอ เปลี่ยนหน้าด้วย Navigator และส่งค่าระหว่างหน้า
เขียนเงื่อนไขแสดงผลลัพธ์ สี และคำแนะนำตามค่า BMI
Workshop: ทำแอปให้สมบูรณ์และทดสอบบนมือถือจริง

Section 10: Lab: วางโครงสร้างโปรเจกต์ให้โตต่อได้

แยกโฟลเดอร์ screens, widgets, models, services และ theme
เก็บค่าคงที่ สี และสไตล์ไว้ที่เดียวแล้วเรียกใช้ทั่วแอป
แนวคิดแยก UI กับข้อมูลตาม Architecture Guide ของ Flutter แบบเข้าใจง่าย
รู้จัก go_router สำหรับแอปที่มีหลายหน้าจอและ Deep Link
ใช้ flutter analyze และ Lint ช่วยรักษาคุณภาพโค้ด

Day 3 ข้อมูล, Web API และแอปที่ใช้งานได้จริง

Section 11: Workshop: แอปรายชื่อผู้ติดต่อ (Contact List)

หน้า Login ด้วย Form, TextFormField และการตรวจสอบข้อมูลที่กรอก
แสดงรายการด้วย ListView.builder และ ListTile พร้อมรูปและไอคอน
กดดูรายละเอียด เพิ่ม แก้ไข และลบรายชื่อ พร้อมช่องค้นหา
บันทึกข้อมูลไว้ในเครื่องด้วย shared_preferences
Workshop: ทำแอปให้ข้อมูลยังอยู่หลังปิดและเปิดแอปใหม่

Section 12: Lab: Debug แอปด้วย VS Code และ DevTools

ตั้ง Breakpoint รันทีละขั้น และดูค่าตัวแปรระหว่างทำงาน
อ่านข้อความ Error และ Stack Trace ที่ผู้เริ่มต้นเจอบ่อย
ใช้ Widget Inspector ไล่หาสาเหตุของ Layout ที่ผิด
ดู Log และตรวจ Network Request ใน Flutter DevTools
Lab: แก้บั๊กที่เตรียมไว้ในแอปตัวอย่าง

Section 13: Lab: ดึงข้อมูลจาก Web API

การทำงานแบบ Asynchronous ใน Dart: Future, async และ await
เรียก Web API ด้วย Package http และอ่านผลแบบ JSON
สร้าง Model Class ด้วย fromJson และจัดการค่าที่เป็น null
แสดงผลด้วย FutureBuilder พร้อมสถานะกำลังโหลดและข้อผิดพลาด
Lab: ดึงข้อมูลพยากรณ์อากาศจาก Open-Meteo API ที่ไม่ต้องใช้ API Key

Section 14: AI Assistant และการ Build แอป

ใช้ AI Assistant ใน VS Code หรือ Android Studio ช่วยอธิบายและเขียนโค้ด
เชื่อม AI กับ Dart and Flutter MCP Server และตรวจโค้ดที่ได้ก่อนใช้เสมอ
Build ไฟล์ APK และ App Bundle สำหรับ Android
ภาพรวมการ Build สำหรับ iOS และขั้นตอนนำแอปขึ้น Store

Section 15: Workshop: แอปพยากรณ์อากาศฉบับสมบูรณ์

ต่อยอดแอปจาก Section 13 ด้วยโครงสร้างโปรเจกต์ที่วางไว้
เพิ่มการค้นหาเมือง หน้ารายละเอียด และ Pull to Refresh
ตกแต่งด้วย Theme, ไอคอนสภาพอากาศ และพื้นหลังตามเวลา
นำเสนอผลงาน รีวิวร่วมกัน และแนะนำเส้นทางเรียนขั้นต่อไป

ຮອບຝຶກອົບຮົມ ແລະ ຮູບແບບການຝຶກອົບຮົມ

ສຳລັບບຸກຄົນ — ຮອບຝຶກອົບຮົມທົ່ວໄປ

ຂະນະນີ້ຍັງບໍ່ມີຮອບຝຶກອົບຮົມເປີດຮັບສະໝັກ ລົງຊື່ຈອງໄວ້ໄດ້ເລີຍ ທີມງານຈະຕິດຕໍ່ກັບເປັນກຸ່ມທຳອິດເມື່ອເປີດຮອບຕໍ່ໄປ ຫຼື ສອບຖາມທາງ LINE ຫຼື ໂທ 02-570-8449 ຫຼື 088-807-9770

ລົງຊື່ຈອງໄວ້ ສອບຖາມຮອບຝຶກອົບຮົມ

ສຳລັບອົງກອນ — In-house / Private Training

ປັບເນື້ອໃນໃຫ້ກົງກັບເຄື່ອງມື ແລະ ວຽກຈິງຂອງທີມ
ເລືອກວັນເອງ ຝຶກອົບຮົມທີ່ບໍລິສັດ ຫຼື ອອນລາຍສົດ
ອອກໃບສະເໜີລາຄາໃນນາມນິຕິບຸກຄົນໃຫ້ຝ່າຍຈັດຊື້

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ

ວິທະຍາກອນຜູ້ສອນ

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

ຄຳຖາມທີ່ພົບເລື້ອຍ

StatelessWidget กับ StatefulWidget ใน Flutter ต่างกันอย่างไร

StatelessWidget ใช้กับส่วนที่หน้าตาไม่เปลี่ยนหลังสร้างแล้ว เช่น ข้อความหรือไอคอนคงที่ ส่วน StatefulWidget มี Object State แยกที่เก็บข้อมูลซึ่งเปลี่ยนได้ระหว่างใช้งาน เช่น ตัวเลขในแอป Counter เมื่อข้อมูลเปลี่ยนให้เรียก setState แล้ว Flutter จะสร้างหน้าจอส่วนนั้นใหม่ เมื่อแอปใหญ่ขึ้นควรย้าย State ที่หลายหน้าจอใช้ร่วมกันไปไว้ใน ChangeNotifier แล้วให้หน้าจอฟังการเปลี่ยนแปลงผ่าน ListenableBuilder หรือ Package provider

จัด Layout ใน Flutter ด้วย Row Column และ Expanded ทำอย่างไร

Row เรียงวิดเจ็ตลูกในแนวนอน ส่วน Column เรียงในแนวตั้ง ใช้ mainAxisAlignment จัดตำแหน่งตามแนวหลัก และ crossAxisAlignment จัดตามแนวขวาง เมื่อต้องการให้ลูกตัวใดขยายเต็มพื้นที่ที่เหลือ ให้ห่อด้วย Expanded และใช้ flex กำหนดสัดส่วน ส่วน Container ใช้ใส่ระยะ ขอบ และสีพื้น ซ้อนวิดเจ็ตทับกันใช้ Stack ใช้ SafeArea กันเนื้อหาไปชนรอยบากของจอ และใช้ LayoutBuilder เมื่อต้องการให้หน้าจอปรับตามขนาดอุปกรณ์

ดึงข้อมูลจาก Web API มาแสดงในแอป Flutter มีขั้นตอนอะไรบ้าง

เพิ่ม Package http ด้วยคำสั่ง flutter pub add http จากนั้นเขียนฟังก์ชันแบบ async ที่เรียก API ด้วย http.get แล้วรอผลด้วย await แปลงข้อความ JSON ด้วย jsonDecode และสร้าง Class Model ที่มี fromJson แปลงเป็น Object แล้วแสดงผลด้วย FutureBuilder ที่มีสถานะกำลังโหลด สถานะผิดพลาด และเผื่อกรณีค่าเป็น null หลักสูตรนี้ฝึกทำครบทุกขั้นตอนกับแอปพยากรณ์อากาศจาก Open-Meteo API

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

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

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

ติดตั้ง Flutter SDK และรันแอปบน Emulator, Simulator และเครื่องจริง ปรับชื่อ ไอคอน และ Splash Screen ของแอป จัด Layout แบบ Material 3 จัดการ State ด้วย setState และ ChangeNotifier สร้างแอปคำนวณ BMI แอปรายชื่อผู้ติดต่อที่บันทึกข้อมูลในเครื่อง และแอปพยากรณ์อากาศจาก Web API Debug ด้วย DevTools และ Build ไฟล์สำหรับติดตั้ง ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

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

ใช้ Flutter SDK เวอร์ชัน stable ล่าสุดกับภาษา Dart 3 เขียนโค้ดด้วย VS Code และ Flutter Extension ใช้ Android Studio สำหรับ Android SDK และ Emulator ทดสอบบน iOS Simulator ได้เฉพาะเครื่อง Mac ที่ติดตั้ง Xcode และทดสอบบนมือถือจริง ตรวจความพร้อมด้วย flutter doctor และไล่ปัญหาด้วย Flutter DevTools ขั้นตอนติดตั้งครอบคลุมทั้ง Windows และ macOS