https://github.com/teerasej/nextflow_widget_today_form_1
Flutter 3 นาที รอบนี้มาดูวิธีสร้าง Form แบบจริงจัง และใช้ TextFormField พร้อมวิธีตรวจข้อมูลก่อนส่งขึ้น server,เริ่มต้นเรียนรู้ สร้างแอพด้วย Google Flutter กับโค้ชพลได้ที่ลิ้งค์เลย
https://github.com/teerasej/nextflow_widget_today_form_1
dart form form-validation-flutter google-flutter thai-citizen-id validator-textformfield
Last synced: 28 days ago
JSON representation
Flutter 3 นาที รอบนี้มาดูวิธีสร้าง Form แบบจริงจัง และใช้ TextFormField พร้อมวิธีตรวจข้อมูลก่อนส่งขึ้น server,เริ่มต้นเรียนรู้ สร้างแอพด้วย Google Flutter กับโค้ชพลได้ที่ลิ้งค์เลย
- Host: GitHub
- URL: https://github.com/teerasej/nextflow_widget_today_form_1
- Owner: teerasej
- Created: 2020-06-15T14:10:40.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-23T16:58:22.000Z (about 6 years ago)
- Last Synced: 2025-10-27T03:33:30.421Z (10 months ago)
- Topics: dart, form, form-validation-flutter, google-flutter, thai-citizen-id, validator-textformfield
- Language: Makefile
- Homepage: https://nextflow.in.th/google-flutter-online/
- Size: 27.8 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flutter 3 นาทีกับโค้ชพล: สร้าง Form จริงจัง และ validate ความถูกต้องของข้อมูลใน TextFormField
โปรเจค Flutter สำหรับฝึกฝนเรียนรู้การใช้งาน Flutter กับโค้ชพลนะครับ ในรอบนี้มาสร้าง Form รับข้อมูลตั้งแต่เริ่มต้นกัน โดยจะมีการใช้ Widget แบบต่างๆ หลายตัว พร้อมการตรวจสอบข้อมูล (Validation) ใน Form ด้วย
- วิธีสร้าง `Form`
- วิธีใช้ `TextFormField`
- การกำหนดให้ซ่อนรหัสผ่านด้วย `obscureText`
- การสร้างและใช้งาน Validation function
- การสร้าง และใช้งาน FormState Key
- การควบคุม Form ด้วย Form Key
## ตอนที่ 2 การล้างข้อมูลใน Form
- การใช้ FormKey ควบคุมข้อมูลใน Form
- การใช้ `reset()` ของ FormState ในการล้างข้อมูลใน TextFormField
## ตอนที่ 3 การเช็คเลขบัตรประชาชน 13 หลักด้วย Dart Package
ในคลิปนี้มาใช้ Dart Package ของโค้ชพล ในการตรวจสอบการกรอกข้อมูลรหัสประจำตัวประชาชน 13 หลักกัน ใช้ง่าย ใช้กับ TextFormField ได้ทันทีด้วย
- แนะนำให้รู้จักกับ Dart Package: [Thai Personal ID](https://pub.dev/packages/nextflow_thai_personal_id)
- การ import ตัว package
- การกำหนด error message ในกรณีที่กรอกข้อมูลผิด
- การใช้งาน Validator กับ TextFormField
## ตอนที่ 4 การยืนยันคำสั่งผู้ใช้ ด้วย AlertDialog
- เข้าใจความสำคัญของ AlertDialog
- วิธีเรียกใช้คำสั่ง showDialog()
- วิธีสร้าง AlertDialog
- แนวคิดในการใช้ AlertDialog
- วิธีการกำหนด content ให้ AlertDialog
- วิธีการกำหนดปุ่ม Actions ให้ AlertDialog
## ดูคลิปทำตามได้ที่นี่เลย
สามารถกด subscribe ติดตามคลิปเรื่อง Flutter และคลิปใหม่ๆ ได้ผ่านช่อง Youtube ของโค้ชพลนะครับ
- ตอนที่ 1 สร้างและ validate ข้อมูลใน Form: https://youtu.be/3G0xE0musUg
- ตอนที่ 2 ล้างข้อมูลใน Form: https://youtu.be/cal9JSDitNM
- ตอนที่ 3 การเช็คเลขบัตรประชาชน 13 หลัก: https://youtu.be/hB4-baWk6lU
- ตอนที่ 4 การยืนยันคำสั่งของผู้ใช้ ด้วย AlertDialog https://youtu.be/qlli0MPF0jY
## เริ่มต้นเรียนรู้สร้างแอพ iOS และ Android ด้วย Google Flutter
ออกแบบให้เข้าใจง่าย ฝึกทำและเรียนรู้จากแอพจริง ดูรายละเอียดและซื้อได้ที่ลิ้งค์ด้านล่างเลยครับ
https://nextflow.in.th/google-flutter-online/