🔖 หมวดบทเรียน: การใช้งานฟอร์มแบบมืออาชีพในแอป Flutter
📌 เหมาะสำหรับ: แอปที่มีการกรอกข้อมูล เช่น สมัครสมาชิก ล็อกอิน หรือแบบฟอร์มทั่วไป
🎯 เป้าหมาย: เข้าใจการสร้างฟอร์มที่สามารถตรวจสอบความถูกต้องของข้อมูลได้แบบอัตโนมัติ
🧭 เกริ่นนำ
Form หรือแบบฟอร์มเป็นส่วนสำคัญของแอป Flutter โดยเฉพาะเมื่อผู้ใช้ต้องกรอกข้อมูล เช่น อีเมล รหัสผ่าน ชื่อ ฯลฯ Flutter มี Form
widget และ TextFormField
ที่สามารถรวมเข้ากับระบบ validation ได้อย่างมีประสิทธิภาพ ในบทนี้เราจะเรียนรู้วิธีสร้างฟอร์มแบบครบวงจร พร้อมตัวอย่างโค้ดจริง
🧱 โครงสร้างฟอร์มพื้นฐาน
final _formKey = GlobalKey<FormState>();
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'กรุณากรอกข้อมูล';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// ข้อมูลถูกต้อง
}
},
child: Text('ส่งข้อมูล'),
),
],
),
)
✅ เทคนิคการ validate
- ตรวจความยาว:
value.length < 6
- ตรวจอีเมล:
RegExp(r'^[^@]+@[^@]+\.[^@]+\$').hasMatch(value)
- ตรวจว่ากรอกข้อมูลครบทุกช่องก่อน submit
🎯 ตัวอย่างแบบฟอร์มลงทะเบียน
TextFormField(
decoration: InputDecoration(labelText: 'อีเมล'),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || !value.contains('@')) {
return 'กรุณากรอกอีเมลที่ถูกต้อง';
}
return null;
},
)
TextFormField(
decoration: InputDecoration(labelText: 'รหัสผ่าน'),
obscureText: true,
validator: (value) {
if (value == null || value.length < 6) {
return 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร';
}
return null;
},
)
✅ สรุป
- ใช้
Form
และTextFormField
สำหรับจัดการข้อมูลจากผู้ใช้ - ใช้
validator
เพื่อระบุเงื่อนไขการตรวจสอบค่าที่กรอก - ตรวจสอบด้วย
.validate()
ก่อน submit
ในบทถัดไปเราจะไปเรียนรู้การเขียน Unit Test เพื่อทดสอบ logic ของแอปอย่างมีประสิทธิภาพ