เริ่มต้นเรียนรู้ สร้างแอพด้วย Google Flutter
- Buy now
- Learn more
เริ่มต้นกับ Flutter และการสร้าง Mobile App

รู้จักกับ Flutter
รู้จักกับภาพรวมขั้นตอนการสร้าง Mobile Application เบื้องต้น
ทำความเข้าใจความแตกต่างของของ Mobile Application กับ Web Application
ทดสอบกันหน่อย
วิธีติดตั้งโปรแกรมสำหรับคนใช้ Windows

หมายเหตุ สำหรับคนที่ต้องการทดสอบแอพบนระบบ iOS และ iOS Simulator
วิธีติดตั้ง Chocolatey
วิธีติดตั้ง Java Development Kit (JDK)
วิธีติดตั้ง Flutter SDK บน Windows
การติดตั้ง Git Client
วิธีติดตั้ง Android Studio บน Windows
ติดตั้ง Visual Studio Code
วิธีติดตั้งโปรแกรมสำหรับคนใช้ MacOS

การติดตั้ง Homebrew
วิธีติดตั้ง Java Development Kit ด้วย Homebrew
วิธีติดตั้ง Flutter SDK ผ่าน Homebrew
ติดตั้ง Android Studio และ Android SDK บน macOS
ใช้ Flutter Doctor ตรวจความเรียบร้อยของระบบ Android และวิธีแก้ปัญหา
วิธีการติดตั้ง Xcode
วิธีการติดตั้ง CocoaPods
ติดตั้ง Visual Studio Code บน Mac (ใช้ได้ทั้งเครื่อง Intel และ M1/M2)
การสร้างแอพแรก และทำความเข้าใจโครงสร้างของโปรเจค

เช็คความพร้อมของระบบ ด้วยคำสั่ง Flutter doctor
วิธีสร้างโปรเจคแอพ Flutter ด้วยโปรแกรม Visual Studio Code
เทคนิค: สร้างโปรเจคแบบไม่ใช้ตัวช่วย
รู้จักกับโครงสร้างของโปรเจค
การทดสอบแอพพลิเคชั่นบน Android ทั้งแบบ Emulator และอุปกรณ์จริง

วิธีสร้าง Android Virtual Device
ทดสอบแอพพลิเคชั่นบน Android Virtual Device
ทำความเข้าใจการทดสอบแอพบนอุปกรณ์ Android
การปลดล๊อค Developer Option ให้ Android ต่อกับ VSCode ได้
แนวทางการหา และติดตั้ง USB Driver
การเชื่อมต่อระบบ Windows เข้ากับอุปกรณ์พกพา
การทดสอบแอพพลิเคชั่นบนอุปกรณ์ iOS

ข้อควรรู้เกี่ยวกับการทดสอบแอพ iOS
การรัน iOS Simulator
การรันแอพพลิเคชั่นทดสอบบน iOS Simulator
การรันแอพบนอุปกรณ์ iOS - การเชื่อมต่อครั้งแรก
การรันแอพบนอุปกรณ์ iOS - การกำหนด Team Profile
การรันแอพบนอุปกรณ์ iOS - การตรวจสอบ Apple ID และกำหนด Bundle Identifier
การแก้ไขปัญหาที่พบบ่อย
แก้ไขปัญหาที่พบในการทดสอบแอพบนอุปกรณ์ iOS - ลืมปลดล๊อคเครื่อง
แก้ไขปัญหาที่พบในการทดสอบแอพบนอุปกรณ์ iOS - Maximum Limited App for free profile reach
การกำหนดชื่อแอพ และไอคอนของแอพ

วิธีเปลี่ยนชื่อแอพพลิเคชั่น Android ใน Flutter
วิธีเปลี่ยนชื่อแอพพลิเคชั่น iOS ใน Flutter
แนะนำเว็บรวม Package สำหรับ Flutter
วิธีติดตั้ง Package ของ Google Flutter
รู้จักกับระบบ Icon ใน Android
วิธีสร้างไอคอนให้แอพ Android
วิธีสร้างไอคอนให้แอพ iOS
เขียนแอพตัวแรกของเรากัน

ก่อนเริ่มต้น
มาเริ่มต้นจากบรรทัดแรกกัน
จุดเริ่มต้นของแอพกับ function Main()
รู้จักกับ Widget ชิ้นส่วนสำคัญของแอพพลิเคชั่นใน Flutter
วิธีเขียนประกาศใช้งาน Widget ในภาษาโปรแกรม Dart
รู้จักกับคำสั่ง Import และการใช้งาน Widget ตัวแรก
กำหนดโครงสร้างของแอพ ด้วย MaterialApp Widget
ทำความเข้าใจ new keyword หายไปไหนจากภาษา Dart
เทคนิคการเขียนใช้งาน Widget หลายตัวซ้อนกัน
สร้างโครงหน้าแอพด้วย Scaffold Widget
กำหนด Theme ให้แอพพลิเคชั่น ผ่าน theme property
เริ่มสร้างแอพ NUMBER COUNTER

แนะนำ Stateless และ Stateful Widget แบบเข้าใจง่าย
สร้าง Stateless Widget ตัวแรกของเรากัน
สร้าง Stateful Widget ตัวแรกของเรากัน
วิธีใช้งาน Center Widget
รู้จักวิธีเริ่มใช้งาน Column Widget
วิธีกำหนดขนาด และสีสันของข้อความด้วย TextStyle
รู้จักและใช้งานปุ่มกด
แทรกค่าตัวนับ ใช้งานใน Text Widget
รู้จักกับการสร้าง Interactivity ใน Widget
กำหนดการทำงานของโปรแกรม จาก Event ของปุ่มกด
รู้จักกับการทำงานของ State
อัพเดตหน้าแอพ ด้วย setState() method
อธิบาย: ทำไมเราควรเขียนโค้ดไว้ใน setState()
เทคนิค: เขียน method แบบฝัง หรือแยกจาก Widget ดี?
แอพ Contact List แบบง่าย

แนะนำก่อนเริ่มเวิร์คชอป
ดาวน์โหลดไฟล์ zip ของโปรเจคนี้
การคืนสภาพโปรเจคให้กับ Flutter Package
การเตรียม Column Widget
การสร้าง List Widget จากโค้ดภาษา Dart
สร้าง function สำหรับสร้าง List Widget และปรับใช้งาน
ใช้ ListView เบื้องต้นกัน
ใช้ ListTile กับ ListView แบบ custom function
รู้จักกับ constructor method ของ ListView
สร้าง ListView ด้วยวิธีมาตรฐานกับ ListView.Builder
สร้าง Class Contact สำหรับเก็บข้อมูลผู้ติดต่อ
เทคนิค: วิธีการเขียนกำหนด Constructor parameter แบบย่อ
เรียกใช้งาน Class contact ในไฟล์ main
การตรวจสอบ และดูการทำงานของโค้ดในแอพพลิเคชั่น (Debugging)

แนะนำการ Debug Application
ใช้โหมด Run และ Breakpoint
การจัดการ Breakpoint
โปรเจค Contact List ตอน 2

รู้จักกับการจัดเก็บข้อมูลแบบ List
วิธีประกาศตัวแปร List
ใช้ข้อมูล List ด้วยคำสั่ง ListView.builder
วิธีเพิ่มรูปภาพเพื่อนำมาใช้งานใน Project
กำหนด pubspec เพื่อโหลดไฟล์รูปภาพเข้าแอพ (เรียกว่า Assets)
รู้จักกับ Image Widget
วิธีแสดงรูปภาพใน ListTile Widget
ตอบสนองกับการกดเลือก โดยใช้ onTap() ใน ListTile
ติดตั้ง package - url-launchers
ทำให้แอพโทรออกไปที่เบอร์ในรายการ List กัน
แอพ Covid 19 Today

แนะนำแอพ COVID-19 Today ส่วนที่ 1
รู้จักกับการทำงานระหว่าง Web API และ Mobile App
ดู Web API ของกรมควบคุมโรค
ดาวน์โหลดโปรเจคจาก Github
คืนสภาพโปรเจคที่ดาวน์โหลดมา
ใช้ ListView และ ListTile สร้าง Layout
ใช้งาน initState method รันโค้ดก่อน method build
ติดตั้ง Http Package
รู้จักกับการทำงานแบบ Asynchronous ในแอพพลิเคชั่น
รู้จักวิธีใช้งาน Asynchronous ในภาษา Dart
สร้าง Async method
รู้จักกับ Future
เรียกข้อมูลจาก Web API ด้วย HTTP
สร้างไฟล์ Class สำหรับเก็บข้อมูล JSON
รู้จักกับ QuickType.io
วิธีใช้งานโค้ดจาก quicktype.io
แปลง JSON เป็น object ตัวแปรใน State
อัพเดต Widget ด้วยการ Setstate
ตามหาต้นเหตุของ error confirmed null
ให้ Dart เลือกแสดงค่าอื่นแทน null โดยใช้ ?? operator
เก็บงาน แสดงจำนวนผู้ป่วยที่หายแล้ว ยังอยู่ในโรงพยาบาล และเสียชีวิต
แอพ Covid-19 Today ส่วนที่ 2

แนะนำแอพ COVID-19 Today ส่วนที่ 2
เพิ่ม LinearProgressIndicator ลงใน Column
ใช้ If else ควบคุมการแสดง LinearProgressIndicator
ประกาศใช้งาน FutureBuilder ในหน้าแอพ
การใช้ builder และ snapshot แสดง widget ตามการทำงานของ async method
การใช้งาน data จาก snapshot
สร้างตัวแสดงยอดสถิติของเราเอง
กำหนดและจัดเรียงยอดสถิติใน Widget
สร้าง Widget StatBox เพื่อใช้ซ้ำ
กำหนดค่า property ให้ Widget เพื่อใช้งาน
กำหนดหน้าตาของ StatBox และใช้ข้อมูล
แทนที่ยอดสถิติเดิม ด้วย Statbox
สร้างระยะห่างระหว่าง Widget ใน Column ด้วย SizedBox
ติดตั้ง package สำหรับการแสดงจำนวนหลักพัน
จัด Format ตัวเลขหลักพันด้วย NumberFormat
กำหนดสิทธิ์ Permission เพื่อเชื่อมต่ออินเตอร์เน็ตเวลาทำงานจริง
เข้าใจภาพรวมของการเผยแพร่แอพ บน Store ต่างๆ (App Distribution)

รู้จักกับภาพรวม การส่งแอพเผยแพร่บน App Store และ Play Store
รู้จักกับวิธีที่สโตร์ระบุตัวตนของแอพเรา
รู้จักกับขั้นตอนสำคัญในการยืนยันความเป็นเจ้าของแอพของเรา
Link สำหรับเข้าไปสมัคร Developer Account ของทั้ง 2 ระบบ
การสร้างไฟล์แอพพลิเคชั่นสำหรับทำไปใช้งานบน Play Store

การติดตั้ง Flutter Automation package สำหรับการสร้างไฟล์ Android
การสร้างไฟล์ Key store สำหรับ Android
ตรวจดูไฟล์ key properties และ build.gradle ที่โดนแก้ไขด้วย Flutter Automation
การสร้างไฟล์ Android App Bundle (AAB)
วิธีการสร้างไฟล์ Android Application Package (APK) แบบต่างๆ
วิธีสร้างไฟล์แอพ iOS และส่งขึ้น App Store

เปิดไฟล์ Xcode Workspace และเช็ค Bundle Identifier
สร้าง Bundle ID บน Apple Developer Program
วิธีสั่ง Archive โปรเจคด้วย Xcode และแสดงใน Organizer
วิธี Validate Archive ด้วย Organizer
วิธีสร้างโปรไฟล์ของ App เราบน App Store Connect
การ Validate App หลังจากสร้างโปรไฟล์ App บน App Store Connect
วิธีสั่ง Distribute App จาก Organizer
วิธีเลือก Build ให้กับโปรไฟล์ App ใน Apple store connect
แอพ My Timeline

แนะนำแอพ My Timeline
เตรียมพร้อมโปรเจค
เพิ่ม Icon Button ใน App Bar
รู้จักกับ Navigation และระบบ Route
เขียนเรียกใช้ Navigator เพื่อสร้างการเปิดหน้าเพจ
สร้าง และแนะนำการจัดเก็บหน้า New Post Page
ใช้ Widget New Post Page กับคำสั่ง Navigator push
รู้จักกับ Form และการรับข้อมูล
สร้างแบบฟอร์มในหน้า New Post Page
สร้างปุ่มสำหรับยืนยันการสร้างโพส
กางปุ่มให้ชิดขอบหน้าจอด้านล่าง
จัดรูปแบบ TextFormField
กำหนดกลไกปุ่มโพส ให้เปิดย้อนกลับมาหน้าแรกได้
สร้าง ListView สำหรับแสดงโพส
เริ่มต้นสร้าง Widget สำหรับแสดงโพส
กำหนดสีและขนาด Text เพื่อกำหนดความสำคัญ
สร้างช่องแบ่งระหว่างโพสใน ListView
ปรับ ListView ให้หร้อมสำหรับการใช้กับข้อมูลจริง
แอพ My Timeline ส่วนที่ 2 - เริ่มเรียนรู้จัดการแอพ ด้วย State Management Provider

แนะนำส่วนประกอบสำคัญของ My Timeline ส่วนที่ 2
รู้จักกับ State Management
รู้จักกับ State Management- Provider
ติดตั้ง Package Provider
รู้จักกับ Provider
สร้าง Provider สำหรับข้อมูล Posts
สร้าง get method เพื่อให้ส่วนอื่น เข้าถึงข้อมูลใน Provider
เขียนสร้าง fat arrow function ครั้งแรก
สร้างฟังก์ชั่นเพื่ออัพเดตข้อมูลใน Provider
รู้จักกับ Multiple Provider
กำหนด MultiProvider ครอบ Widget ที่ต้องการในแอพ
ปรับการตั้งค่า Provider เป็นรูปแบบ Fat Arrow Function
รู้จักกับ Consumer
ประกาศ Consumer เพื่อใช้ข้อมูลจาก Provider ในการอัพเดตข้อมูล
ทดสอบการทำงานของ Provider และ Consumer ตอนเริ่มการทำงานของแอพ
สร้างกลไกการตรวจสอบข้อมูลใน Form ด้วย FormKey
สร้าง Validator Function ในการตรวจสอบข้อมูลของ TextFormField
เช็คความยาวต่ำสุดของข้อความที่กรอกใน TextFormField
ใช้ TextEditingController ในการดึงข้อความออกจาก TextFormField
เพิ่มข้อความใหม่ ลงไปเก็บไว้ใน Provider
ทดสอบการทำงานของ Provider ในการเพิ่มข้อมูลเข้า List
ใช้ Template ที่เราออกแบบให้ ListView กับข้อมูลจาก Provider
กำหนดให้โพสใหม่แสดงเป็นรายการแรกใน List
แอพแสกนบาร์โค้ด และคิวอาร์โค้ด (BARCODE & QR CODE)

แนะนำแอพแสกน ส่วนที่ 2
การเรียกใช้งานแอพ YOUTUBE กับแอพ LINE จาก QR CODE ที่แสกนได้ในแอพ

แนะนำแอพแสกน ส่วนที่ 2
รู้จักกับ URL Scheme
รู้จักกับ URL Scheme ของ Youtube
วิธีตรวจเช็ค link YouTube จาก QR code
ทดสอบการอ่านลิ้งค์ Youtube จาก QR Code
แสดงปุ่มเปิดแอพ Youtube ถ้าพบว่าเป็น link Youtube
ติดตั้งแพคเกจ url_launcher
เขียนคำสั่งเปิดแอพ Youtube จากลิ้งค์ที่แสกนได้จาก QR Code
ทดสอบเปิดคลิปวิดีโอบนแอพ Youtube จาก link ที่แสกนได้จาก QR Code
วิธีเปิดคลิปวิดีโอ Youtube จาก Link ที่แสกนได้บนแอพ iOS
รู้จักกับ URL Scheme ของแอพ Line
แสดงปุ่มเปิดแอพ LINE ถ้าพบว่าเป็น link เกี่ยวข้องกับ LINE
ทดสอบเปิดแอพ LINE จากลิ้งค์ที่แสกนได้จาก QR Code
แอพลงทะเบียน PART 1 - สร้างแบบฟอร์มสำหรับรับข้อมูล

แนะนำ Workshop
คำสั่งโคลนโปรเจค git clone https://github.com/teerasej/nextflow-flutter-registration-app-public.git
สร้าง tab menu
สร้างหน้าลงทะเบียน
วาง Layout ของแบบฟอร์มลงทะเบียน
สร้างส่วนสำหรับกดถ่าย และแสดงรูปผู้ลงทะเบียน
รู้จักกับการใช้งาน InkWell Widget
สร้างเอฟเฟค Ink และ InkWell สำหรับบริเวณถ่ายรูปลงทะเบียน
รู้จักกับปัญหา Bottom Overflow ที่เกิดจากการเรียกใช้ Keyboard
ทดสอบการกรอกแบบฟอร์ม และปัญหา Overflow
แก้ไขปัญหา Bottom Overflow ด้วย SingleChildScrollView
สร้าง Class สำหรับเก็บข้อมูล จากแบบฟอร์มลงทะเบียน
สร้าง FormKey เพื่อควบคุมการทำงานของ Form Widget
การดึงข้อมูลออกจาก TextFormField มาใช้งาน
วิธีเก็บข้อมูลจาก Form ทั้งหมด ลง Object ด้วย onSaved ของ TextFormField
ทดสอบเก็บข้อมูลจากแบบฟอร์มด้วย onSave
ทบทวน การตรวจสอบข้อมูลด้วย Validator
ติดตั้ง package form_field_validator
ตรวจจับข้อมูลที่ไม่ได้กรอกลงแบบฟอร์มด้วย RequiredValidator
ตรวจจับการกรอก email ผิดรูปแบบ ด้วย EmailValidator และ MultiValidator
แสดงแป้นคีย์บอร์ดสำหรับพิมพ์อีเมลล์
แอพลงทะเบียน PART 2 - การจัดเก็บข้อมูลไว้ที่ฝั่ง SERVER ด้วย FIREBASE

รู้จักกับ Firebase
วิธีลงทะเบียนเข้าใช้งานระบบ Firebase
รู้จักกับรูปแบบของโปรเจค Firebase
วิธีสร้างโปรเจค Firebase ใหม่สำหรับใช้งานกับแอพพลิเคชั่น
รู้จักกับการนำระบบ Firebase มาใช้งานในโปรเจคโมบายล์แอพพลิเคชั่น Flutter ของเรา
ติดตั้ง package Firebase_core
วิธีการตั้งค่าใช้งาน Firebase บนระบบ Android
วิธีการตั้งค่าใช้งาน Firebase บนระบบ iOS
รู้จักการรองรับ กลไกเริ่มต้นการทำงานของ Firebase ด้วย Future Builder
เริ่มต้นใช้งาน Firebase ด้วย FutureBuilder
การเปิดใช้งาน Cloud FireStore บนโปรเจค Firebase
ติดตั้ง cloud_firestore
เรียกใช้งาน Cloud Firestore เพื่อบันทึกข้อมูลในหน้าลงทะเบียน
ทดสอบการบันทึกข้อมูลลง Cloud Firestore
ล้างแบบฟอร์มเมื่อบันทึกข้อมูลเสร็จ
แอพลงทะเบียน PART 3 - ถ่ายรูปผู้ลงทะเบียน

รู้จักกับการทำงานของระบบกล้องถ่ายรูปที่เรียกใช้ได้ผ่านแอพ
รู้จักกับ Permission
ติดตั้ง package image_picker
การตั้งค่าแอพ Android สำหรับการใช้งานกล้องถ่ายรูป
การตั้งค่าแอพ iOS สำหรับการใช้งานกล้องถ่ายรูป
วิธีเรียกใช้งานกล้องถ่ายรูป ด้วย Image Picker และเช็คที่อยู่ของไฟล์
ทดสอบการใช้งานกล้องถ่ายรูปในแอพ Flutter
แสดงรูปภาพที่ถ่ายได้ ด้วย Image Widget
ทดสอบการทำงานหลังจากถ่ายรูป และกลับเข้ามาในแอพ
แอพลงทะเบียน PART 4 - อัพโหลดและจัดการไฟล์รูปภาพบน FIREBASE

รู้จักกับแนวทางในการจัดการไฟล์ในแอพพลิเคชั่น
รู้จักกับ Firebase Cloud Storage
ติดตั้ง package - firebase_storage
วิธีสร้าง storage bucket บน Firebase
รู้จักกับคำสั่งการใช้งาน Cloud Storage และอัพโหลดไฟล์
สร้างและเรียก function สำหรับอัพโหลดไฟล์รูปขึ้น Firebase Cloud Storage
ทดสอบถ่ายและอัพโหลดรูปภาพขึ้น Firebase Cloud Storage
กำหนด Rule สำหรับอัพโหลดไฟล์แบบไม่ต้อง login บน Firebase Cloud Storage
ทดสอบอัพโหลดไฟล์รูปขึ้น Cloud Storage
การกำหนดที่อยู่ของไฟล์ที่อัพโหลด
แสดงป๊อปอัพสถานะการจัดเก็บข้อมูล
ป้องกันการปิดป๊อปอัพโดยผู้ใช้
เคลียร์ข้อมูลรูปภาพหลังอัพโหลดเสร็จแล้ว
ทำการบันทึกชื่อไฟล์ไปที่ firestore เพื่อเชื่อมโยงไฟล์รูปกับข้อมูลผู้ลงทะเบียน

การสร้างไฟล์แอพพลิเคชั่นสำหรับทำไปใช้งานบน Play Store

5 Lessons