สอน flutter โดย DIY Recipe Project | EP.2 Dependencies, Dynamic Form, Validation Form

จาก EP.1 เราได้รู้จัก Scaffold, Stateful, Stateless, Routing ไปกันแล้ว EP.2 จะมาทำความรุ้จักกับคำว่า Dependencies แล้วเราจะมาทำ Dynamic Form พร้อมกับการ Validation Form กันนะครับ
ใครที่ยังไม่เคยอ่านบทความFlutter นี้ กลับไปอ่าน EP.1 ตามลิงค์ข้างล่างนะครับ

บทความนี่จะพาไปทำการ upload รูปภาพ และ ทำ dynamic form
นะครับ ตัวอย่างตามรูปด้านล่าง

โดยส่วนแรกเราจะมาทำ การอัพโหลดรูปภาพ รู้กันก่อน ในการอัพโหลดรูปภาพนั้นเราจะใช้ตัวช่วยในการ เลือกว่าเราจะอัพโหลดรูป จาก Gallery
หรือ Camera
นะครับ
จะใช้ตัวช่วยต้องลง dependency ก่อน
dependency
ถ้าแปลจาก google translate มันก็จะแปลว่า การพิ่งพา ในโปรแกรมก็เหมือนกับการ เอา module หรือ function จากที่อื่นมาใช้ พิ่งพาหรือนำมาใช้ในโปรแกรมของเรา โดยในสายงานบางที่ก็จะเรียกมันว่า library
บ้าง หรือ module
บ้าง แล้วแต่จะเรียกกันนะครับในบทความนี้ เจ้าของบทความขอเรียกมันว่า library
ละกันครับ
Library ที่จะใช้ในการ เลือกการอัพโหลดรูป มีชื่อว่า image_picker

วิธีลงก็ง่ายแสนง่าย เปิด pubspec.yaml
ขึ้นมาแล้วเพิ่มโค๊ดเข้าไปในส่วนนี้ครับ
dependencies:
flutter:
sdk: flutter
image_picker: 0.6.7
กด Pub get
เป็นการโหลด library เข้ามาในโปรเจคของเราครับ จากนั้นทำตามโค๊ดด้านล่างเลยครับ
เมื่อทำตามโค๊ดแล้ว เมื่อกดปุ่ม Upload
จะได้ผลลัพธ์ประมาณนี้ครับ

ต่อไปจะพามาทำ Validation Form กัน
จากโค๊ดจะมาอธิบายใน GlobalKey
, TextEditingControlle
และ InputDecoration
สักหน่อยว่ามันคืออะไรนะครับ
GlobalKey
เป็นคลาส ที่กำหนด key ให้กับ Form เพื่อที่จะสามารถใช้ state ต่างๆ ใน Form ได้ ในตัวอย่างนี้ก็คือ _formKey.currentState.validate()
คือการ validate ค่าทั้งหมดที่อยู่ใน Form
TextEditingController
เป็น Controller ให้กับ TextFormField
InputDecoration
ก็จะคล้ายกับการใส่ style ใส่ ค่า default ให้กับ TextForm ของเรา
ซึ่ง Decoration แปลว่า การตกแต่ง
ผลลัพธ์ที่ได้เมื่อกด Submit

ในส่วนต่อไปเมื่อเรารู้จักการทำ Validate Form
แล้ว เจ้าของบทความก็เลยอยากที่จะทำที่มันยากขึ้นมาอีกหน่อย คือการ เพิ่ม/ลบ TextFormField
ได้
ทำ Dynamic Form
ขั้นต่อไปเราจะทำส่วนที่เป็น Dynamic Form
แต่ก่อนที่จะทำ ผมอยากมาชวนพาทำ view/widget
ของ Form ตัวนี้ก่อนครับ เริ่มจาก ./widget/recipe_text_field.dart
จากโค๊ดแล้วหน้าตา widget
จะออกมาประมาณนี้ครับ

เริ่ม Dynamic Form ได้แล้วครับ
เพิ่ม veriable
เข้าไปใน _RecipeFormPage
จากนั้น ปรับในส่วนของ widget
หน้า _RecipeFormPage
ตามนี้เลยครับ
จากโค๊ด เจ้าของบทความได้ประกาศ RecipeFormField
ในรูปแบบ list
เมื่อ ทำการกด add เข้าไป จะ ให้ เพิ่ม RecipeFormField
เข้าไปยัง list
แล้วใช้คำสั่ง setState
ให้ view/widget
แสดงตามข้อมูลใหม่อีกครั้งครับ
ส่วนใน RecipeTextField
เมื่อ ลูบจาก list แล้ว จะให้ set
ฟังก์ชัน onRemove
ที่เป็น callback function
เพื่อที่จะ callback
กลับมาว่า ให้ลบ Field index
ไหนออกไป เพียงเท่านี้ ก็ทำให้มันสามารถ เพิ่ม/ลบ field
กันได้แล้วครับ
เมื่อทำการใส่ข้อมูลจะได้ผลลัพธ์มาประมาณนี้ครับผม


บทนี้ ก็จะเป็นการเรียนรู้เรื่องทำ Form นะครับ แอพส่วนใหญ่ก็จะมีการทำ Form Input ให้กรอกข้อมูลนั้นนี่ บทความนี้เลยพาทำแต่ กลัวมันจะง่ายเกินไปเลยก็หาโจทย์ที่มันยากขึ้นมาสักหน่อยคือการทำ Dynamic มันซะเลย ส่วน EP ต่อไปจะพาทำ SqlLite นะครับ เราจะพาทำการต่อกับ database กันครับ

