สัปดาห์ที่ 4: ฟอร์มและการรับค่าข้อมูล (Forms & Input Validation)
🎯 สารบัญโครงสร้างเนื้อหาหมวดปฏิบัติการที่ 1 และ 2
การเปรียบเทียบวิดเจ็ตรับข้อมูล: TextField vs. TextFormField ⚔️
TextField (ระดับพื้นฐาน)
เป็นวิดเจ็ตอิสระสำหรับรับข้อมูลตัวอักษรเดี่ยวจากแป้นพิมพ์ เหมาะสำหรับการรับข้อมูลทั่วไปโดยไม่ต้องคำนึงถึงความสัมพันธ์กับตัวควบคุมภายนอก [1].
- ดึงค่าทำงานผ่านการผูก Listener หรือตรวจเช็ค onChanged [2].
- ข้อจำกัด: ไม่มีระบบตรวจสอบสิทธิ์และพ่นข้อความ Error สีแดงให้ในตัว (ต้องเขียนเงื่อนไขควบคุม UI เอง).
TextFormField (ระดับมืออาชีพ)
เป็นวิดเจ็ตพิเศษที่สืบทอดความสามารถมาจาก FormField ถูกออกแบบให้ทำงานร่วมกับวิดเจ็ต Form ด้านบน [1].
- รองรับคุณสมบัติ validator สำหรับรันตรวจสอบค่าและคายค่าคำแจ้งเตือนได้ทันที [3].
- มีคุณสมบัติ onSaved ใช้สั่งบันทึกสถานะลงโมเดลเมื่อรันฟอร์มผ่านเกณฑ์สำเร็จ.
📘 สรุปการตัดสินใจเลือกวิดเจ็ต (Decision Guide):
- TextField: ใช้เมื่อรับข้อมูลเดี่ยวไม่ต้องการ validation เช่น ช่องค้นหา (Search Bar) หรือตัวกรองทริปแบบเรียลไทม์
- TextFormField: ใช้เมื่ออยู่ในฟอร์มที่ต้องตรวจสอบความถูกต้อง เช่น ช่องล็อกอิน ลงทะเบียน หรือเพิ่มข้อมูลทริป
- ทั้งคู่ใช้
TextEditingControllerร่วมกันได้เหมือนกัน
การจัดการและล้างข้อมูลข้อความด้วย TextEditingController 🎮
`TextEditingController` คือกลไกเชื่อมโยงหน้าจอ View และโค้ดหลังบ้าน เพื่อเรียกอ่านค่าข้อความ (Read) เปลี่ยนแปลงเนื้อหา (Update) และล้างกล่องข้อความทิ้งเมื่อกดยืนยันสำเร็จ [2]:
// 1. การประกาศสร้างอินสแตนซ์และผูกควบคุมวิดเจ็ต
class _MyFormState extends State<MyForm> {
final _usernameController = TextEditingController();
// ⚠️ กฎเหล็ก: ต้องทำลายล้าง Controller ใน dispose เสมอเพื่อเลี่ยงหน่วยความจำรั่วไหล (Memory Leaks)
@override
void dispose() {
_usernameController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return TextFormField(
controller: _usernameController,
decoration: const InputDecoration(labelText: 'ชื่อผู้ใช้'),
);
}
}
📋 วิธีใช้ TextEditingController ในสถานการณ์ต่าง ๆ:
- อ่านค่า:
_controller.text - อัปเดตค่า:
_controller.text = 'ค่าใหม่' - ล้างข้อมูล:
_controller.clear() - เลือกข้อความ:
_controller.selection = TextSelection(...)
การควบคุมแป้นพิมพ์และการโยกย้าย Focus ด้วย FocusNode ⌨️
ในการพิมพ์ข้อมูลบนแบบฟอร์มที่มีหลายๆ ช่องกรอก ยอดแย่ที่สุดคือการบีบให้ผู้เรียนต้องเอานิ้วกดจิ้มเปลี่ยนช่องกรอกด้วยตนเอง เราจึงใช้ `FocusNode` เข้ามาควบคุมระบบโฟกัสและทิศทางแป้นพิมพ์:
เมื่อพิมพ์ชื่อผู้ใช้เสร็จเรียบร้อยและกดยืนยันปุ่มส่งบนแป้นพิมพ์ (เช่น textInputAction: TextInputAction.next) เราสามารถเขียนรหัสย้ายโฟกัสข้ามพาสไปหาช่องรหัสผ่านได้ทันทีดังนี้:
final FocusNode _passwordFocusNode = FocusNode();
// 2. ผูก textInputAction กับ onFieldSubmitted
TextFormField(
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) => FocusScope.of(context)
.requestFocus(_passwordFocusNode),
);
// 3. ผูก FocusNode เข้ากับช่องถัดไป
TextFormField(focusNode: _passwordFocusNode);
💡 Best Practices เรื่อง Focus:
- อย่าลืม
_passwordFocusNode.dispose()ในdispose() - ช่องสุดท้ายในฟอร์มใช้
TextInputAction.doneเพื่อปิดคีย์บอร์ด - ใช้
FocusScope.of(context).unfocus()เพื่อปิดคีย์บอร์ดทั้งหมด
🎯 แผนภาพจำลองการส่งต่อโฟกัสแบบอัตโนมัติ
โครงสร้างหลักของ Form และการใช้ตัวนำทาง GlobalKey 🏗️
ในการสร้างแบบฟอร์มตรวจสอบคุณค่าข้อมูล เราจะใช้ตัวห่อหุ้มชั้นนอกสุดชื่อวิดเจ็ต Form เพื่อประสานความสัมพันธ์และควบคุมตรวจสอบความปลอดภัยของทุกๆ กล่อง TextFormField ภายใต้ร่มเงาเดียวกัน [1].
🛡️ GlobalKey<FormState> คืออะไร?
คือคีย์ลับสากลเฉพาะตัวที่สร้างขึ้นมาเพื่อผูกติดกับ Form และมอบอำนาจให้เราสามารถสั่งรันประมวลผลคำสั่งตรวจสอบความถูกต้องข้อมูลผ่าน State จากภายนอกวิดเจ็ตได้โดยตรง [3].
🎯 โครงสร้างความสัมพันธ์ของโหนด Form ต้นไม้
การออกแบบเงื่อนไขคัดกรองข้อมูลด้วยคุณสมบัติ validator 🧪
ฟังก์ชัน `validator` จะทำงานดักตรวจสอบสายตัวอักษรดิบที่ผู้ใช้งานพิมพ์เข้าสู่กล่องกรอก หากข้อมูลถูกต้องครบถ้วนตามกฎระบบ ฟังก์ชันจะต้องคืนค่ากลับเป็น null แต่หากตรวจพบค่าผิดกฎ ให้พ่นส่งกลับเป็นข้อความ String ผลลัพธ์เตือนภัย ทันที [3]:
// 1. การเขียนเงื่อนไขคัดกรองความมั่นคงของกล่องอีเมล (Email Validator)
TextFormField(
decoration: const InputDecoration(labelText: 'อีเมลแอดเดรส'),
validator: (value) {
// ตรวจช่องว่างข้อมูล
if (value == null || value.isEmpty) {
return 'กรุณากรอกอีเมลสะกดจริง';
}
// ตรวจสอบเงื่อนไขรูปแบบอีเมลด้วยนิพจน์ Regular Expression (Regex)
if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
return 'รูปแบบโครงสร้างอีเมลไม่ถูกต้อง';
}
return null; // 🟢 ข้อมูลผ่านเกณฑ์อย่างไร้กังวล
},
);
// 2. การตรวจรหัสผ่านกำหนดความยาวขั้นต่ำ (Password Length Validator)
validator: (value) {
if (value == null || value.isEmpty) {
return 'กรุณากรอกรหัสผ่าน';
}
if (value.length < 8) {
return 'รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร';
}
return null;
},
💡 เคล็ดลับ (Pro Tips):
- ใช้
autovalidateMode: AutovalidateMode.onUserInteractionเพื่อตรวจสอบอัตโนมัติหลังผู้ใช้พิมพ์ - แยก Validator เป็นฟังก์ชันสแตนด์อโลน (เช่น
String? validateEmail(String?)) เพื่อนำไปใช้ Test ซ้ำได้ - ไม่ควรตรวจสอบซับซ้อนใน Widget ตรง ๆ — ย้ายลอจิกออกไปที่ util หรือ domain layer
การทริกเกอร์ตรวจสอบความเสถียรข้อมูลผ่าน validate() ⚡
เมื่อผู้ใช้งานกดปุ่มล็อกอินหรือยืนยันคำขอสมัครสมาชิก เราจะเขียนโค้ดเพื่อควบคุมการสั่งการคีย์อ้างอิงสากล _formKey.currentState!.validate() เพื่อสั่งให้ตรวจสอบความถูกต้องทันที [3]:
onPressed ของปุ่มยืนยัน
validator ทุกช่องกรอก
true) ดึงโค้ดยิง API หากผิดปล่อย Error แสดง UI
ElevatedButton(
onPressed: () {
// รันตรวจเช็คฟอร์มประมวลผล หากข้อมูลผ่านเกณฑ์ทั้งหมด
if (_formKey.currentState!.validate()) {
// เรียก onSaved เพื่อให้ TextFormField แต่ละช่องเก็บค่าลงตัวแปร
_formKey.currentState!.save();
// 🟢 เรียกส่งลอจิก ViewModel ดึงค่าไปรันประมวลผลเซิร์ฟเวอร์ต่อ
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('กำลังประมวลผลข้อมูลลงทะเบียน...')),
);
}
},
child: const Text('สมัครสมาชิก'),
);
🔑 ความต่างระหว่าง validate() กับ save():
validate()→ ตรวจสอบความถูกต้อง คืนค่าbool(true = ผ่าน)save()→ เรียก callbackonSavedของทุกช่องเพื่อบันทึกค่าลงตัวแปร/โมเดล- ใช้งานคู่กัน:
if (validate()) { save(); submit(); }
ใบงานปฏิบัติการประจำคาบเรียน: พัฒนาระบบลงทะเบียนสมัครสมาชิก 📱🧪
ลงมือปฏิบัติด้วยตัวนักศึกษาเอง โดยนำความรู้คริปโทกราฟีของคู่คีย์ และการรับข้อมูลฟอร์ม มาร่วมกันเขียนสเกเลตันแบบฟอร์มลงทะเบียนสมาชิกที่ปลอดภัย มีเสถียรภาพ และสอดคล้องกับพอร์ตทางทฤษฎี:
📋 ความต้องการของระบบ (Form Specifications)
- กล่องชื่อบัญชี (Username): ห้ามเป็นช่องว่างข้อมูลดิบเด็ดขาด [3]
- กล่องอีเมล (Email): ตรวจรูปแบบสระและเครื่องหมาย @ ของสากลให้ถูกต้อง [3]
- กล่องรหัสผ่าน (Password): ต้องระบุความยาวขั้นต่ำอย่างน้อย 8 ตัวอักษรเพื่อความปลอดภัย [3]
🧪 คำชี้ชวนการทดสอบปฏิบัติภารกิจ
ทดสอบรันผลลัพธ์ผ่านตัวเครื่องโทรศัพท์พกพาจำลอง และป้อนข้อมูลที่ผิดพลาดเพื่อเช็คสัญญาณพ่น Error UI สีแดงใต้กรอบทำงานอย่างลื่นไหล
// lib/ui/auth/screens/register_screen.dart (โครงร่างเริ่มต้น)
class _RegisterFormState extends State<RegisterForm> {
final _formKey = GlobalKey<FormState>();
final _usernameController = TextEditingController();
final _emailController = TextEditingController();
@override
void dispose() {
_usernameController.dispose(); _emailController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => Form(
key: _formKey,
child: Column(children: [
// TextFormField 3 ช่อง: Username / Email / Password
// + ElevatedButton สมัครสมาชิก
]),
);
}
📘 ขั้นตอนปฏิบัติ (Step-by-Step):
- สร้าง
GlobalKey<FormState>และTextEditingController3 ตัว - เขียน
validatorสำหรับ Username (ไม่ว่าง), Email (Regex), Password (≥8 ตัว) - ใช้
autovalidateMode.onUserInteractionเพื่อตรวจอัตโนมัติ - ปุ่มกดเรียก
validate() + save()แล้วส่งต่อ ViewModel - อย่าลืม
dispose()controller ทุกตัว
การดักสแกนพฤติกรรมความถูกต้องแบบเรียลไทม์ (onChanged) 📡
คุณลักษณะ onChanged จะประมวลและรันลอจิกความถูกต้องทันทีที่ปลายนิ้วสัมผัสอักษรใดๆ บนแป้นพิมพ์ ซึ่งมีพฤติกรรมและแนวปฏิบัติเทียบกับระบบจัดเก็บคีย์บอร์ด Controller ดังนี้ [2]:
📡 การสแกนผ่าน onChanged (ระดับพื้นฐาน)
ยิงลอจิกตรวจสอบสถานะและวาดหน้าจอ Rebuild UI ซ้ำๆ แบบเบาตัว เหมาะกับการใช้ทำระบบกรองค้นหาทริปท่องเที่ยวแบบทันท่วงที (Live Filtering)
💾 การผูก Controller Listeners (ระดับโปรดักชัน)
นำเสนอการติดตั้ง Listener ดักสแกนพจนานุกรมในคลาส State เพื่อควบคุมและล็อกอินประเมินรูปแบบการกรอกได้ละเอียดและปลอดภัยสูง
สัปดาห์ที่ 4: ฟอร์มและการรับค่าข้อมูล (Forms & Input Validation)
🎯 สารบัญโครงสร้างเนื้อหาหมวดปฏิบัติการที่ 3 และ 4
ยกระดับความสวยงามของฟอร์มด้วย InputDecoration 🎨
การจัดรูปแบบที่ดีช่วยสร้างประสบการณ์ผู้ใช้งาน (UX) ที่ราบรื่น โดยการเพิ่มคำแนะนำ (Hint) ป้ายกำกับ (Label) ไอคอนนำหน้า/ต่อท้าย (Prefix/Suffix) และเส้นขอบเมื่ออยู่ในสถานะปกติ โฟกัส หรือเกิดข้อผิดพลาด:
TextFormField(
decoration: InputDecoration(
// ป้ายกำกับแบบลอยตัวและไอคอนนำหน้า
labelText: 'อีเมลผู้ใช้',
hintText: 'example@email.com',
prefixIcon: const Icon(Icons.email_outlined),
suffixIcon: IconButton(icon: const Icon(Icons.clear), onPressed: () => _emailController.clear()),
// สถานะข้อผิดพลาด (แสดงอัตโนมัติเมื่อ validator คืนค่า String)
errorStyle: TextStyle(color: Colors.red.shade300, fontSize: 12),
// การตกแต่งเส้นขอบสไตล์กล่องมน (OutlineInputBorder)
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue.shade400, width: 2.0),
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
),
),
);
💡 คุณสมบัติ InputDecoration ที่ควรรู้:
labelText— ป้ายกำกับลอยตัว (Floating Label) เลื่อนขึ้นเมื่อโฟกัสhintText— ข้อความตัวอย่าง (Placeholder) ในกล่องprefixIcon / suffixIcon— ไอคอนนำหน้า / ต่อท้าย (เช่น ปุ่มล้าง, ตาดูรหัส)errorText / errorStyle— แสดงข้อความผิดพลาดพร้อมสี (จัดการอัตโนมัติด้วย validator)helperText— ข้อความช่วยเหลือใต้ช่องกรอก
การแสดงผลการทำงานและแจ้งเตือนผู้ใช้ด้วย SnackBar 💬
เมื่อแบบฟอร์มผ่านเกณฑ์การตรวจสอบ (Validation) เรียบร้อยแล้ว การรายงานสถานะหรือผลลัพธ์เป็นสิ่งจำเป็นอย่างยิ่ง โดยทีมงานวิศวกร Flutter แนะนำให้แจ้งข้อมูลแบบไม่ขัดจังหวะสายตาผู้ใช้ด้วยการเรียก **`ScaffoldMessenger`** เพื่อวาด SnackBar:
// แนวทางรันข้อความด่วนแบบ SnackBar ระดับสากล
void _showSuccessFeedback(BuildContext context) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('บันทึกข้อมูลเรียบร้อยแล้ว!'),
backgroundColor: Colors.green.shade600,
duration: const Duration(seconds: 3),
action: SnackBarAction(
label: 'ตกลง',
textColor: Colors.white,
onPressed: () {},
),
),
);
}
ScaffoldMessenger.of(context) เป็นกลไกใหม่ที่ทำงานแยกอิสระจากสิทธิ์ควบคุม State ของ Scaffold เดิม ส่งผลให้ระบบทำงานได้อย่างต่อเนื่องแม้ผู้ใช้กดปิดหน้าจอดังกล่าวไปแล้ว.
🎨 รูปแบบ SnackBar ตามสถานะ (State Variants):
backgroundColor: Colors.green
backgroundColor: Colors.red
backgroundColor: Colors.blueGrey
กำหนดด้วย property behavior: SnackBarBehavior.floating เพื่อให้เป็นป้ายลอยมุมมนสวยงาม
การปิดแป้นพิมพ์คีย์บอร์ดเมื่อสัมผัสพื้นที่ว่างด้วย GestureDetector ⌨️❌
ปัญหา UX ยอดนิยมในระบบมือถือคือ แป้นคีย์บอร์ดไม่ยอมยุบตัวลงเมื่อพิมพ์ข้อมูลเสร็จ วิธีแก้ปัญหาระดับโปรคือการหุ้มหน้าจอหลัก (`Scaffold`) ด้วยวิดเจ็ต **`GestureDetector`** เพื่อคอยดักตรวจจับสิทธิ์สัมผัส แล้วเรียกคืนโฟกัสผ่านคำสั่ง **`unfocus()`**:
// ห่อหุ้ม Scaffold ชั้นนอกสุดเพื่อดักล้าง โฟกัส (Focus Clear)
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
// ตรวจสอบและยกเลิกสถานะโฟกัสของคีย์บอร์ด
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
child: Scaffold(
appBar: AppBar(title: const Text('สมัครสมาชิก')),
body: const MyRegistrationForm(),
),
);
}
สลับซ่อน/แสดงรหัสผ่าน (Obscure Text Toggle) 👁️🔒
เพื่อความปลอดภัยขั้นพื้นฐานและสอดคล้องกับมาตรฐานความปลอดภัยสากล การส่งรหัสผ่านต้องปิดบังอักษรดิบด้วยคุณลักษณะ obscureText: true และ open ช่องทางให้ผู้ใช้สลับมองรหัสผ่านได้ผ่านการคลิกไอคอนรูปดวงตา:
// สร้างตัวแปร boolean เพื่อสับเปลี่ยน State
bool _obscurePassword = true;
// พอร์ตโครงสร้างวิดเจ็ตใน InputDecoration
TextFormField(
obscureText: _obscurePassword,
decoration: InputDecoration(
labelText: 'รหัสผ่าน',
suffixIcon: IconButton(
icon: Icon(_obscurePassword ? Icons.visibility_off : Icons.visibility),
onPressed: () {
setState(() {
_obscurePassword = !_obscurePassword;
});
},
),
),
);
การส่งข้อมูลฟอร์มสู่เลเยอร์ ViewModel (MVVM Binding) 🏗️
ตามคู่มือสากลของสถาปัตยกรรมแอปพลิเคชัน Flutter แบบ MVVM ชั้นหน้าจอ View จะต้องไม่ส่งค่าไปคุยกับเครือข่ายตรงๆ [1] แต่จะรวบรวมค่าข้อมูลดิบผ่านคำสั่ง onSaved หรือดึงสดผ่าน TextEditingController แล้วส่งต่อสิทธิ์ให้ **ChangeNotifier ViewModel** เป็นผู้ประสานงานหลัก [2, 3]:
// 1. View เรียกคำสั่งเมื่อ Validation ผ่านฉลุย
if (_formKey.currentState!.validate()) {
_formKey.currentState!.onSaved();
// เรียก ViewModel ประมวลผลคำขอล็อกอินผ่านคลัง Provider
context.read<LoginViewModel>().submitLogin(
email: _emailValue,
password: _passwordValue,
);
}
AuthRepositoryRemote.login() จะสั่ง Authenticator.authorize() ของแพ็กเกจ openid_client พาผู้ใช้ไปยืนยันตัวตนที่ django-oidc-provider แล้วนำ Credential (ID Token / Access Token) กลับมาเก็บใน Secure Storage แทนการส่งรหัสผ่านตรงถึง API
การจัดการข้อผิดพลาดข้อมูลจากฝั่ง REST API หลังบ้าน 📡🚨
แม้ว่าข้อมูลจะผ่านการดักกรองจากโค้ดเครื่องหน้าบ้าน (Client-Side Validation) สำเร็จ แต่อาจเกิดข้อผิดพลาดในการประมวลผลฝั่งเซิร์ฟเวอร์หลังบ้าน เช่น **"อีเมลซ้ำซ้อน" (Email Already Exists)** หรือ **"รหัสผ่านไม่ผ่านเกณฑ์วิเคราะห์จริง"** ในรูปโครงสร้างข้อมูล JSON:
// ปรับปรุง ViewModel ให้อัปเดต UI เมื่อได้รับข้อผิดพลาดรหัส HTTP 400 จาก Django
class LoginViewModel extends ChangeNotifier {
String? _serverErrorMessage;
bool _isLoading = false;
String? get serverErrorMessage => _serverErrorMessage;
bool get isLoading => _isLoading;
Future<void> submitLogin(String email, String password) async {
_isLoading = true;
_serverErrorMessage = null;
notifyListeners();
final result = await _authRepo.login(email, password);
_isLoading = false;
if (result is Error) {
_serverErrorMessage = result.error.message; // ดึงข้อความล้มเหลวจากเซิร์ฟเวอร์ [6]
notifyListeners(); // สั่งสแกนและพ่นสีแดงเตือนบนหน้าจอ View [7]
} else {
notifyListeners(); // สำเร็จ → นำทางไปหน้า Home
}
}
}
# 🧪 จำลองข้อผิดพลาดฝั่ง server ด้วย HTTPie (backend: uv run manage.py runserver)
$ http POST :8000/api/bookings/ destination_name="" price=-5
↳ HTTP/1.1 400 Bad Request → {"price": ["Ensure this value is greater than 0."]}
# แสดงข้อความ error บน UI ด้วย Flutter:
if (viewModel.serverErrorMessage != null) {
Text(viewModel.serverErrorMessage!, style: TextStyle(color: Colors.red));
}
result.serverErrorMessage หากไม่เป็นว่างเปล่า (Null) ให้ดึงไปแสดงผลแบบกล่องเตือน หรือพ่นลงป้ายกำกับข้อผิดพลาดของช่องนั้นๆ โดยด่วน.
200 OK / 201 Created / 400 Bad Request / 401 Unauthorized / 403 Forbidden / 404 Not Found / 500 Server Error
วิดเจ็ตกรอกแบบฟอร์มประเภทจำกัดตัวเลือก (Selection Inputs) 🗳️
นอกจากการพิมพ์ข้อความทั่วไป ระบบแอปพลิเคชัน Compass ยังรองรับกล่องรับข้อมูลประเภทกำหนดสิทธิ์การตรวจสอบและการติ๊กเลือกชนิดต่างๆ ภายใต้วิดเจ็ตตระกูล **`FormField`** สำหรับควบคุมความต่อเนื่องในกล่องเดียวกัน [8, 9]:
จำกัดขอบเขตข้อมูลที่นักท่องเที่ยวสามารถจองได้ (เช่น เลือกจุดหมายปลายทาง ทริปเมืองโตเกียว ลอนดอน) สามารถแนบฟังก์ชันตรวจสอบคุณค่า validator ได้เหมือนช่องพิมพ์ทั่วไป.
items: destinations,
onChanged: (v) => _dest = v!,
validator: (v) => v == null
? 'เลือกจุดหมาย' : null,
);
ให้ยืนยันเงื่อนไขความสอดคล้องหรือความประสงค์พิเศษเพิ่มเติม (เช่น ต้องการไกด์นำเดินทางผู้เชี่ยวชาญภาษาไทย) บันทึกและควบคุมเป็นพารามิเตอร์ประเภท boolean ในระบบ View.
value: _needGuide,
onChanged: (v) => setState(() => _needGuide = v!),
title: const Text('ต้องการไกด์'),
);
สวิตช์สำหรับเปิด/ปิดฟังก์ชันการทำงานบางอย่างแบบทันที เช่น เปิดปิดสิทธิ์การรับรายงานด่วนทริปลดราคาพิเศษผ่านกลไกระบบ Notification ในอุปกรณ์เคลื่อนที่.
value: _notify,
onChanged: (v) => setState(() => _notify = v!),
title: const Text('รับการแจ้งเตือน'),
);
💡 เคล็ดลับการใช้งาน:
- ทุกวิดเจ็ตประเภท Selection ที่อยู่ใน
Formยังถูกรวมอยู่ใน_formKey.currentState!.validate() - เก็บค่าจาก
onChangedลงตัวแปร State ก่อนส่งต่อ ViewModel - DropDownButtonFormField ต้องกำหนด
itemsเป็น List ของDropdownMenuItem
ใบงานปฏิบัติการ: พัฒนาฟอร์มเพิ่มข้อมูลทริปเดินทางใหม่ 🧭🧪
นักศึกษาแต่ละกลุ่มจะต้องลงมือพัฒนาหน้าจอส่งต่อข้อมูลสลับจองทริปเดินทางใหม่ **`Create Booking Form`** ภายใต้โครงร่างสถาปัตยกรรมของโครงการ Compass ให้ใช้งานและรันงานได้สมบูรณ์ [10]:
🔥 เกณฑ์ปฏิบัติและข้อตกลงการทดสอบ (Specifications):
- สร้างแบบฟอร์มรองรับคีย์บอร์ด Unfocus และแสดง SnackBar คล่องตัวเมื่อสำเร็จ
- ช่องจุดหมาย (Destination): ใช้ DropdownFormField และห้ามปล่อยว่าง
- ช่องงบประมาณ (Price): ตรวจสอบว่าต้องพิมพ์ระบุเป็นตัวเลขจำนวนเต็มบวกเท่านั้น
- จัดส่งข้อมูลเข้าสู่ ViewModel เพื่อเตรียมพร้อมส่งต่อไปยัง REST API หลังบ้านจริง
🎯 ทิศทางการเรียนรู้นอกเหนือชั่วโมง
นักศึกษาสามารถตรวจสอบชุดคำสั่งและเทมเพลตฟอร์มรับส่งข้อมูลของโครงการตัวอย่างทางการบนกิธฮับ [4]:
สรุปบทเรียนสัปดาห์ที่ 4 และปูทางสู่ปฏิบัติการสัปดาห์ที่ 5 🏁
วันนี้เราได้เรียนรู้การขัดเกลาอินเทอร์เฟซรับข้อมูลอย่างประณีตผ่าน InputDecoration, แสดง SnackBar [8], ปิดคีย์บอร์ดอัตโนมัติ, สร้างปุ่มสลับซ่อนรหัสผ่าน และทำการผูกส่งข้อมูลอย่างมั่นคงปลอดภัยเข้าสู่เลเยอร์ ViewModel (MVVM) ได้เสร็จสิ้นเรียบร้อยแล้ว [2]
🚀 ปูทางสู่ สัปดาห์ที่ 5: Dependency Injection & Controlled Testing
- Dependency Injection (DI): ถอดเปลี่ยนคลังเก็บข้อมูลข้ามสภาพแวดล้อมด้วย
package:providerทั่วทั้งแอป [11, 12] - Controlled Testing: เขียนคำสั่งและกระบวนการจำลองข้อมูลเพื่อทำ Unit Test บนเลเยอร์ ViewModel โดยปราศจากเงื่อนไขเครือข่ายเน็ตเวิร์ก [13, 14]
- Widget Testing: เขียนโปรแกรมวาดและทดสอบสกรีน UI เพื่อทดลองคลิกสุ่มตรวจสอบการสะท้อนสถานะ (State) โดยอัตโนมัติ [13, 14]
ตัวอย่างโค้ดสมบูรณ์: ฟอร์มลงทะเบียนแบบครบวงจร 🧩
รวบรวมทุกแนวคิดที่เรียนมาในสัปดาห์นี้ (Form, GlobalKey, Controller, Validator, InputDecoration, Password Toggle, SnackBar, unfocus) ในไฟล์เดียวที่รันได้จริง:
// lib/ui/auth/register_screen.dart — Full registration form
class _RegisterScreenState extends State<RegisterScreen> {
final _formKey = GlobalKey<FormState>();
final _username = TextEditingController();
final _email = TextEditingController();
final _password = TextEditingController();
final _passwordFocus = FocusNode();
bool _obscurePassword = true;
@override
void dispose() {
_username.dispose(); _email.dispose(); _password.dispose(); _passwordFocus.dispose();
super.dispose();
}
void _submit() {
if (!_formKey.currentState!.validate()) return;
_formKey.currentState!.save();
// เรียก ViewModel → Repository → API (MVVM)
context.read<RegisterViewModel>().register(
username: _username.text,
email: _email.text,
password: _password.text,
);
}
Widget build(BuildContext context) => GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Form(
key: _formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(children: [
// TextFormField (username/email) + obscure password ...
]),
),
);
}
_password.text หรือไม่ — ถ้าต่างกันให้พ่นข้อความ 'รหัสผ่านไม่ตรงกัน'